Default onClick image swaps with loop

**croberts** · 07-15-2012, 05:37 AM

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?

**bernie1227** · 07-15-2012, 06:06 AM

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.

**jscheuer1** · 07-15-2012, 07:50 AM

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>

**croberts** · 07-15-2012, 04:04 PM

Thanks John and Bernie, that makes sense.

Thread: Default onClick image swaps with loop

Thread Tools

Search Thread

Default onClick image swaps with loop

Bookmarks

Bookmarks

Posting Permissions