JavaScript Question

**jamiller** · 01-19-2007, 06:38 PM

Hello all. My first post!

Just to let you know I'm fairly new to JS so bare with me.

Ok. So I have two images, img1 and img2. But only img1 will show on the page when it first loads. When the user clicks on img1, img2 will appear in it's place. When the user clicks on img2, img1 will appear in it's place. This should be an easy one. I am fairly familiar with Flash Actionscript and I know that JS is very similar but I can't figure it out by myself.

Thanks!

jamiller

**mburt** · 01-19-2007, 07:18 PM

Code:

<html>
<head>
<script type="text/javascript">
function swap(orig, first, second) {
var source = first
if (source == first) {
	source = second
	}
else {
	source = first
	}
orig.src = source
return false;
}
</script>
</head>
<body>
<img src="img1" onclick="swap(this,'img1.png','img2.gif')">
</body>
</html>

**djr33** · 01-19-2007, 10:39 PM

Function looks just fine to me.

Just for the record, this is VERY similar to a very common function, "rollover images", for which there are many varying codes (with different options, etc.). Any of those would work as well, with on difference....
<img src="something" onMouseover="rolloverfunction()">
Would need to be:
<img src="something" onClick="rolloverfunction()">
The onMouseout function would have to be considered as well.

This isn't intended to directly help because it looks like you've got exactly what you need, so that's great. But if you are interested in learning javascript, it's just something to think about.

**djr33** · 01-19-2007, 10:40 PM

Hrmm?

**jamiller** · 01-19-2007, 10:41 PM

Thanks for the reply but it wouldn't work for me after the first click. Ideally it would swap img1 and img2 over and over as the user clicks the images. The code looks like it should work, any ideas as to why it isn't?

Thanks again.

**jamiller** · 01-19-2007, 10:42 PM

lol. sorry. im new here. i wanted to reply to mburt not to my question. i just wanted to make sure that he got my response.

**djr33** · 01-19-2007, 10:45 PM

Now this conversation reads really weirdly with your missed post. I explain a lot, then apparently forget all of it and say "hrmm?"

Anyway....

Welcome. No problem.

The reply is to the conversation, just like a chatroom or instant message, if you do either of those.

**jamiller** · 01-19-2007, 10:51 PM

lol. yes, i am computer literate. but i use deviantart a lot and when people reply to another reply then that user will get that reply in his/her inbox. doesn't look like that happens here. Will mburt have to come back to this thread to see my response? lol... anyways, getting a bit off topic.

Still need help

Thanks again!

**mburt** · 01-19-2007, 11:03 PM

In theory, it should work, but I guess it doesn't. I'm not really sure what the problem is, so you might have to wait untill somebody worthy replies

**djr33** · 01-19-2007, 11:14 PM

Well, there's always the option of just adapting an onMouseover script.

Random guesses at the script... just brainstorming:

var source = first
if (source == first) {
Uh... won't it always be 'first'?

return false;
That could be disabling it right there. I haven't noticed return false used in functions before, just in calling them/the actions of the mouse etc.
Ex: <a href="page.htm" onClick="return popIt('page.htm);">
that would return the function and not the link. Return false, in some cases at least, would return neither, though I think return false; otherstuff(); will (sometimes at least) return the second function. But I'm not really sure. In this case, there's nothing to disable. Perhaps if the image were a link and you wanted it to go to the link if JS weren't available and otherwise to the function (not a bad idea), then that would be related... but... as is, it isn't.

You use this "this" property to specify the image. I don't know the rules with it, but I have had problems in the past (might just be my lack of practice with JS). Using, I *think*, document.images['namehere'].src might work better. Perhaps 'this' in relation to the image returns the name, not the actual reference. But, again, not sure.

Thread: JavaScript Question

Thread Tools

Search Thread

JavaScript Question

Bookmarks

Bookmarks

Posting Permissions