...

View Full Version : how to reverts 2 images back to original using onClick event



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">
<!--
body {
background-color:#eef;
color:#000;
}
#a {
width:100px;
height:100px;
border:2px solid #000;
background-image:url(anim2.gif);
margin:10px auto;
}
#b {
width:360px;
height:280px;
border:3px solid #000;
background-image:url(apple.jpg);
margin:10px auto;
}
-->
</style>

<script type="text/javascript">
<!--
var preloads=[];
function preload(){
for(var i = 0; i < arguments.length; i ++) {
preloads[preloads.length] = new Image();
preloads[preloads.length - 1].src = arguments[i];
}
}

function swapImage(id,pic,pic1){
if(document.getElementById(id).style.backgroundImage=='url('+pic1+')') {
document.getElementById(id).style.backgroundImage='url('+pic+')';
}
else {
document.getElementById(id).style.backgroundImage='url('+pic1+')';
}
}
preload('anim2.gif','anim3.gif','apple.jpg','banana.jpg');
//-->
</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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum