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.

Code:

<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

Code:

<!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>