Onclick change image and onclick change again [Archive]

View Full Version : Onclick change image and onclick change again

jundo12

05-09-2014, 04:34 AM

I would like to make this

zoom script, upon click, to change an image elsewhere on the page. and upon another click, change it back to the first image again.

<input type="image" src="up2.png" width="10%" onclick="zoom (1.2)"/>

<input type="image" src="down2.png" width="10%" onclick="zoom(0.9)"/>

the idea being that each time a click happens, it zooms a bit and changes a pic of a character nearby. and upon another click zooms a bit more and shows the original pic of the character again, and repeats that same sequence, each time it's clicked. so original pic, second pic, original pic, second pic = click click click click and so on .

vwphillips

05-09-2014, 09:25 AM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
</head>

<body>
<input type="button" name="" value="Rotate" onclick="Rotate('i1',['http://www.vicsjavascripts.org/StdImages/Egypt6.jpg','http://www.vicsjavascripts.org/StdImages/Egypt7.jpg']);" />
<img id="i1" src="http://www.vicsjavascripts.org/StdImages/Egypt6.jpg" />
<script type="text/javascript">
/*<![CDATA[*/

function Rotate(id,a){
var i=document.getElementById(id),o=Rotate[id],z0=0,n;
if (i&&!o&&a instanceof Array){
for (;z0<a.length;z0++){
n=new Image();
n.src=a[z0];
a[z0]=n;
}
o=Rotate[id]={
a:a,
n:0
}
}
if (o){
o.n=++o.n%o.a.length;
i.src=o.a[o.n].src;
}
}

/*]]>*/
</script>

</body>

</html>

jundo12

05-09-2014, 03:25 PM

thanks! that works great!