Default onClick image swaps with loop
I found the following script that changes an image every time you click on it.
var oImgs = ;
oImgs = "james.jpg"
oImgs = "james1.jpg"
oImgs = "james2.jpg"
var imgs = new Image();
imgs.src = "images/" + oImgs[i];
var x = 1;
var doc = document.getElementById("swap");
doc.src = "images/" + oImgs[x];
x = 0;
<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?