Log in

View Full Version : 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">
<!--

var oImgs = [];
oImgs[0] = "james.jpg"
oImgs[1] = "james1.jpg"
oImgs[2] = "james2.jpg"

for(var i=0;i<oImgs.length;i++){
var imgs = new Image();
imgs.src = "images/" + oImgs[i];
}

var x = 1;

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

//-->
</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
I found the following script that changes an image every time you click on it.

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

<script type="text/javascript">
<!--

var oImgs = [];
oImgs[0] = "james.jpg"
oImgs[1] = "james1.jpg"
oImgs[2] = "james2.jpg"

for(var i=0;i<oImgs.length;i++){
var imgs = new Image();
imgs.src = "images/" + oImgs[i];
}

var x = 1;

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

//-->
</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:


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

To:


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


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