how to reverts 2 images back to original using onClick event [Archive]

pj59

09-25-2005, 07:32 AM

I am trying to figure out how to reverts 2 images that was clicked the first time back to the original images in the second click.

Example:

A B

click on A ---> change B to C
click on B ---> change A to D

now I need to figure how to get

D C

click on D ---> change C to B
click on C ---> change D to A

I tried different ways but I can't seem to figure out what I am doing wrong. I tried adding another function ....changeImgBack and did the same function as the first one...only change the document.images[ ].src... so forth...well that didn't work. Like I said I tried multiple ways but no luck! I know there got to be a simple way of doing it. As you can see...I am a beginner in javascript. I would appreciate any suggestion on this matter. Here is what I got so far...I got it where you can click on the images but it only change it once. I would like to have it where you can click on the images continuously

var myImage = new Array() // list Images

myImage[0] = new Image()
myImage[0].src = "images/image1.gif"
myImage[1] = new Image()
myImage[1].src = "images/image2.gif"
myImage[2] = new Image()
myImage[2].src = "images/image3.gif"
myImage[3] = new Image()
myImage[3].src = "images/image4.gif"

function changeImg(valueClick) {
if (valueClick == 0) {
document.images[1].src = myImage[2].src
} else if (valueClick == 1) {
document.images[0].src = myImage[3].src
} else {
alert("Houston, we have a problem")
}
return false; // prevent click from going anywhere
}

}

<td><a href="Lab4.1.html" onClick="changeImg(0);return false;"><img src="images/image1.gif" name="img1" width="300" height="150" ></a></td>
<td><a href="Lab4.1.html" onClick="changeImg(1);return false;"><img src="images/image2.gif" name="img2" width="300" height="150" ></a></td>

coothead

09-25-2005, 07:57 PM

Hi there pj59,

here is a working example...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>image swapping</title>
<base href="http://coothead.homestead.com/files/"/>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<meta name="Content-Script-Type" content="text/javascript"/>
<meta name="Content-Style-Type" content="text/css"/>
<style type="text/css">

</style>

<script type="text/javascript">

</script>

</head>
<body>

<div id="a" onclick="swapImage('b','apple.jpg','banana.jpg')">
</div>
<div id="b" onclick="swapImage('a','anim2.gif','anim3.gif')">
</div>

</body>
</html>

...unfortunately, though, it does not work in Opera 8.5. :eek:

coothead