Toggling Images

@ad-hocFeb 26.2007

Can anyone point me to a simple code (actually, any code) that would allow a user to toggle back and forth between two images (such as Before & After) by clicking on them? I have several sets of images on the page and want to have an image in each cell of a table.

My search has turned up nothing. I tried altering a slideshow code, but I ended up with something that toggled every image on the page simultaneously when you just clicked on one. The code was really unwieldy anyway. There’s got to be a more eloquent, streamlined way to do it.

Any help would me much appreciated.

to post a comment

JavaScript

@JMRKERFeb 26.2007 — #Pardon the images, but will this work for you?

[code=php]
 <html>
 <head>
 <title>Image Toggle</title>
 <script type="text/javascript">
 var Pics = new Array(
 "http://optometry.nova.edu/faculty_staff/images/rumsey2.jpg",
 "http://optometry.nova.edu/faculty_staff/images/jay_rumsey.jpg",
 "http://www.nova.edu/hpd/otm/pics/acuity/dc_400.jpg",
 "http://www.nova.edu/hpd/otm/pics/acuity/dcb400.jpg");
 maxImg = 2;
 var xImg = 0;
 
 if (document.images) {
 Img0 = new Image;     Img1 = new Image;    Img2 = new Image;     Img3 = new Image;
 Img0.src = Pics[0];   Img1.src = Pics[1];  Img2.src = Pics[2];   Img3.src = Pics[3];
 } else {
 Img0 = "";            Img1 = "";           Img2 = "";            Img3 = "";
 }
 
 function ChangeImgIn(xImg) {
 tmp = 'tmpImg'+xImg;
 cba = 'b4a'+xImg;
 yImg = xImg * 2;
 if (document.images) { document.getElementById(tmp).src=Pics[yImg+1] }
 document.getElementById(cba).innerHTML = 'Before';
 }
 function ChangeImgOut(xImg) {
 tmp = 'tmpImg'+xImg;
 cba = 'b4a'+xImg;
 yImg = xImg * 2;
 if (document.images) { document.getElementById(tmp).src=Pics[yImg] }
 document.getElementById(cba).innerHTML = 'After';
 } 

 </script>
 </head>
 <body>
 <table border=0> 
 <tr> 
 <td ALIGN=CENTER VALIGN=CENTER>
 <a onMouseover="ChangeImgIn(0)" onMouseout="ChangeImgOut(0)">
 <img id="tmpImg0" SRC="http://optometry.nova.edu/faculty_staff/images/jay_rumsey.jpg"
 name="tempImg0" HEIGHT=200 WIDTH=150> </a>
 <div id="b4a0">Before</div> 

 </td>
 <td ALIGN=CENTER VALIGN=CENTER>
 <a onMouseover="ChangeImgIn(1)" onMouseout="ChangeImgOut(1)">
 <img id="tmpImg1" SRC="http://www.nova.edu/hpd/otm/pics/acuity/dcb400.jpg" 
 name="tempImg1" HEIGHT=200 WIDTH=150> </a>
 <div id="b4a1">Before</div> 

 </td>
 </tr>
 </table>
 </body>
 </html>
 [/code]

Substitute your own image locations in an even/odd order for before/after selection display. Keep the Image number the same as the IMG and DIV "id" values if you increase the table size.

@ad-hocauthorFeb 26.2007 — #I noticed this code is using the onMouseover and onMouseout commands. I had wanted it to respond to clicks, not rollovers. However, it makes me realize that a rollover would be just about as good as a toggle in this particular situation, and that would be much simpler code, I think... Maybe I will be able to get away with that...

@CrazyMerlinFeb 26.2007 — #just change the mouseover and mouseout events for click events.

@ad-hocauthorFeb 26.2007 — #I have since found a way to make my original script work, so my troubles are over (and I get to keep the toggle effect). But I was wondering... is there another click event besides onClick? Unlike mouseover and mouseout, you only get to click once... it seems like that code would have to be changed quite a bit to make it work with clicking.

@JMRKERFeb 26.2007 — #Why not just set a "true/false" variable (or array for multiple images) to determine which image you want to display after each click of the mouse?

When clicked, check variable. If true, display image #1 or if false, image #2.

Keep in mind that your mouse has only a certain number of "click lives"

and you might cause an early death of your mouse without the mouseovers.?

Toggling Images

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Toggling Images

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴