PDA

View Full Version : change image on click of the image



crashkillsvince
07-01-2008, 02:51 AM
I'm looking for some kind of script that will allow me to swap/change a series of images by clicking in it. I've found plenty of "Galleries" that allow you do do this via a timer or by some form of link below the image but that's not going to work. I need to click directly on the image to make it switch to the next one.

Any ideas? Please? I'm going crazy.

jscheuer1
07-01-2008, 03:12 AM
In its most basic form:


<img src="some.gif" onclick="this.src='someother.gif';">

Without knowing more of the specifics, about all I can add is that it would generally be a good idea to preload the 'someother.gif'. But how best to do that, and when and if it is actually desirable or necessary can vary.

crashkillsvince
07-01-2008, 04:21 AM
How would you do it with say 10 images?

And thank you by the way.

jscheuer1
07-01-2008, 06:18 AM
You're welcome. But you are still not giving us much to go on. If you want to do it with 10 images, you could just do it with 10 images. What's this for?

crashkillsvince
07-01-2008, 02:41 PM
I'm putting together a pageant page. There will be a winner (10 images) and a runner up (10 images). The client would like for it to look like there's an image for each person until you click on that girl's image. It would then advance to the next image in the series every time you clicked the current one.

jscheuer1
07-01-2008, 06:32 PM
Could you be more specific, like 'story board' it? Explain what happens to which images and when. And/or:

Please post a link to the page on your site that contains the problematic code so we can check it out.

crashkillsvince
07-02-2008, 03:14 AM
No problem. You open the page and there are 2 images displayed in 2 different tables. I want to be able to click on one of the images and have it replace itself with another 5, 10, 15 images (same size, location, different images etc.)

Start with image 1 displayed. Click on that image, image 2 replaces image 1. Click on image 2, image 3 replaces image 2 etc.

I would like the second image to do the same, separately.

I can do it in flash in 5 minutes but I would rather do it directly in HTML via a script.

As you can tell I'm not the most knowledgeable person.

jscheuer1
07-02-2008, 09:26 AM
You can put the image tags in tables or wherever you like in your markup. Here is a commented script demo that will show you how to do the rest:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

var pic_sets = {

preload:true, // set to true or false

// first image in each set should be the corresponding image tag's actual src image.
// each set may have as many images as you like, other sets may be added.

pic_set_1:['some.gif', 'another.gif', 'bob.gif'],
pic_set_2:['mary.gif', 'sid.gif', 'susie.gif', 'alice.gif'],

///////////////// Stop Editing /////////////////

change:function(el){
var a=pic_sets[el.id];
for (var re, pnum = 0, i = a.length - 1; i > -1; --i){
re = new RegExp(a[i]);
if(re.test(el.src))
pnum = i;
}
pnum = pnum < a.length - 1? pnum + 1 : 0;
el.src = a[pnum];
}
};

(function(){
if (!pic_sets.preload)
return;
var im = [];
for (var p in pic_sets)
if(/pic_set/.test(p))
for (var i = pic_sets[p].length - 1; i > 0; --i){
im[im.length] = new Image();
im[im.length - 1].src = pic_sets[p][i];
}
})();

</script>

</head>
<body>
<img id="pic_set_1" src="some.gif" onclick="pic_sets.change(this);">

<img id="pic_set_2" src="mary.gif" onclick="pic_sets.change(this);">

</body>
</html>

Questions? Just ask.

crashkillsvince
07-02-2008, 03:11 PM
You are the man!

Where can I send a donation? LOL.:)

crashkillsvince
07-10-2008, 02:56 PM
Bummer. I've placed the script in my page but it only works locally.

Here's the site:

http://www.missmissionbeachsandiego.org/working

It works fine on my machine but not on my host. Any idea why this would happen?

jscheuer1
07-10-2008, 03:24 PM
The additional images aren't on the server where the script expects to find them, for example:


http://www.missmissionbeachsandiego.org/working/3.jpg

just isn't there. Put all the images in the same folder as the page, and list just the image names in the arrays.

or change this line:


re = new RegExp(a[i]);

to:


re = new RegExp(a[i].replace(/.*\/([^\/]*)$/, '$1'));

But if you do, the full path and filename to the image must be listed for all images in the arrays.

Also, you have two image tags in your markup with the id "pic_set_1", the second should be "pic_set_2".