PDA

View Full Version : 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
<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?" :D

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 :p

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.

Twey
01-19-2007, 11:43 PM
The easiest way to actually swap images that I've found is to simply take the back image and insert it into the DOM before the front image using .insertBefore().

jamiller
01-20-2007, 12:00 AM
uhh. I have no idea what you're talking about. Can you clarify how to make this work or point me in a direction to find out for myself? Thanks

Twey
01-20-2007, 12:27 AM
Oh, I'm sorry, I thought you meant actually swapping image elements around. I should've read the thread more thoroughly before posting, I guess :)
<img src="img1.png" onclick="this.src = (this.src === 'img1.png' ? 'img2.png' : 'img1.png');">

jamiller
01-20-2007, 01:11 AM
Damn I'm having no luck with this one. That didn't work either. I'll figure out something sooner or later. Thanks for the reply nonetheless :)

coothead
01-20-2007, 01:25 PM
Hi there jamiller,

have a look at this example, it may suit your requirements...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<base href="http://mysite.orange.co.uk/azygous/images/">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
div {
text-align:center;
}
</style>

<script type="text/javascript">
var test=true;
window.onload=function(){
document.getElementById('myimage').onclick=swapImage;
}

function swapImage() {
if(test==true) {
this.src='ballr.gif';
test=false;
}
else{
this.src='ballgr.gif';
test=true;
}
}
</script>

</head>
<body>

<div>
<img id="myimage" src="ballgr.gif" alt=""/>
</div>

</body>
</html>

coothead