Default onClick image swaps with loop

I found the following script that changes an image every time you click on it.

++++++++++++++++++++++

<script type="text/javascript">

</script>

<img id="swap" src="images/james.jpg" width="80" height="120" border="0" onclick="swapImg();" style="cursorointer;" />

+++++++++++++++++++++

This script works perfectly for me, but I would like to have multiple instances of this script, using different images for every instance.

For example, I have 3 boxes - red, blue, green
- if you click on the red box, it loops through a square, a circle and back to a red box
- if you click on the blue box, it loops through a happy face, a sad face, and back to a blue box
- if you click on a green box, it loops through a tree, a flower, and back to a green box

I am not looking for a timed loop, or anything like that. I would like to just click on the image to swap it. Once it is clicked 3 times, it returns to the original image.
How can I go about using this script for different mini image galleries, as mentioned above?

Quote:

Originally Posted by croberts

I found the following script that changes an image every time you click on it.

++++++++++++++++++++++

<script type="text/javascript">

</script>

<img id="swap" src="images/james.jpg" width="80" height="120" border="0" onclick="swapImg();" style="cursorointer;" />

+++++++++++++++++++++

This script works perfectly for me, but I would like to have multiple instances of this script, using different images for every instance.

For example, I have 3 boxes - red, blue, green
- if you click on the red box, it loops through a square, a circle and back to a red box
- if you click on the blue box, it loops through a happy face, a sad face, and back to a blue box
- if you click on a green box, it loops through a tree, a flower, and back to a green box

I am not looking for a timed loop, or anything like that. I would like to just click on the image to swap it. Once it is clicked 3 times, it returns to the original image.
How can I go about using this script for different mini image galleries, as mentioned above?

Alright, I'm a little confused here, although I do get the fact that you're trying to loop back to the first image, so In the spawImg function you have to change:

Code:

function swapImg(){ var doc = document.getElementById("swap"); doc.src = "images/" + oImgs[x]; if(x<oImgs.length-1){ x ++; }else{ x = 0; } }

To:

Code:

function swapImg(){ var doc = document.getElementById("swap"); doc.src = "images/" + oImgs[x]; if(x = oImgs.length){ x = 0; }else{ x++; } if(x<oImgs.length-1){ x ++; }else{ x = 0; } }

That should work.

Code:

<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"> (function(){ var swaps = { swap1: { images : [ 'james0.jpg', 'james1.jpg', 'james2.jpg' ] }, swap2: { images : [ 'martha0.jpg', 'martha1.jpg', 'martha2.jpg' ] } }, p, t; function swapImg(cfg){ t.src = 'images/' + cfg.images[cfg.x = ++cfg.x % cfg.images.length]; } swapImg.preload = function(images){ var i = 0; while(images[++i]){ (function(im){ var nim = new Image(); nim.src = 'images/' + im; })(images[i]); } }; for(p in swaps){ swaps[p].x = 0; swapImg.preload(swaps[p].images); } function swaponclick(e){ e = e || event; t = e.target || e.srcElement; swaps[t.id] && swapImg(swaps[t.id]); } document.addEventListener && document.addEventListener('click', swaponclick, false) || !document.addEventListener && document.attachEvent && document.attachEvent('onclick', swaponclick); })(); </script> </head> <body> <img id="swap1" src="images/james0.jpg" width="100" height="100" alt="james image" title="James Image"><br> <img id="swap2" src="images/martha0.jpg" width="100" height="100" alt="martha image" title="Martha Image"><br> </body> </html>

Or the more compact, yet more verbose (changes highlighted):

Code:

<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"> (function(){ var swaps = {}, p, t; swaps.swap1 = {images: []}; swaps.swap1.images[0] = 'james0.jpg'; swaps.swap1.images[1] = 'james1.jpg'; swaps.swap1.images[2] = 'james2.jpg'; swaps.swap2 = {images: []}; swaps.swap2.images[0] = 'martha0.jpg'; swaps.swap2.images[1] = 'martha1.jpg'; swaps.swap2.images[2] = 'martha2.jpg'; function swapImg(cfg){ t.src = 'images/' + cfg.images[cfg.x = ++cfg.x % cfg.images.length]; } swapImg.preload = function(images){ var i = 0; while(images[++i]){ (function(im){ var nim = new Image(); nim.src = 'images/' + im; })(images[i]); } }; for(p in swaps){ swaps[p].x = 0; swapImg.preload(swaps[p].images); } function swaponclick(e){ e = e || event; t = e.target || e.srcElement; swaps[t.id] && swapImg(swaps[t.id]); } document.addEventListener && document.addEventListener('click', swaponclick, false) || !document.addEventListener && document.attachEvent && document.attachEvent('onclick', swaponclick); })(); </script> </head> <body> <img id="swap1" src="images/james0.jpg" width="100" height="100" alt="james image" title="James Image"><br> <img id="swap2" src="images/martha0.jpg" width="100" height="100" alt="martha image" title="Martha Image"><br> </body> </html>

Thanks John and Bernie, that makes sense.