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:

Code:

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

Code:

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

Thread: change image on click of the image

Thread Tools

Search Thread

change image on click of the image

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions