PDA

View Full Version : Change Image shown on mouse click



Piper
12-28-2006, 07:58 AM
Greetings all,

I'm wanting to spice up a page of mine. Currently it shows 4 different images of the same items, but in different colours. What I'm wanting to do is, have 1 image on the page, and 4 links underneath. Clicking on the link will change the image shown...

For example, the page starts with the black verion shown. Clicking on the word "blue" will show the blue image, clicking on red will show the red image etc.

Sounds simple enough, but every seach I conduct for "change image" gives me ones that provide mouse over effects... can anyone point me to a script that will do this?

Ta!

codeexploiter
12-28-2006, 08:46 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Image Change Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function changeIt(objName)
{
//The image object accessed through its id we mentioned in the DIV block which is going to be visible currently
var obj = document.getElementById(objName);

//An array that hold the IDs of images that we mentioned in their DIV blocks
var objId = new Array();

//Storing the image IDs into the array starts here
objId[0] = "image1";
objId[1] = "image2";
objId[2] = "image3";
objId[3] = "image4";
objId[4] = "image5";
//Storing the image IDs into the array ends here

//A counter variable going to use for iteration
var i;

//A variable that can hold all the other object references other than the object which is going to be visible
var tempObj;

//The following loop does the display of a single image based on its ID. The image whose ID we passed into this function will be the
//only image that is displayed rest of the images will be hidden based on their IDs and that part has been handled by the else part
//of the if statement within this loop.
for(i=0;i<objId.length;i++)
{
if(objName == objId[i])
{
obj.style.display = "block";
}
else
{
tempObj = document.getElementById(objId[i]);
tempObj.style.display = "none";
}
}
return;
}
</script>
</head>

<body>
<div id="image1">
<img src="1.jpg" border="0" alt="one" />
</div>

<div id="image2" style="display:none">
<img src="2.jpg" border="0" alt="two" />
</div>

<div id="image3" style="display:none">
<img src="3.jpg" border="0" alt="three" />
</div>

<div id="image4" style="display:none">
<img src="4.jpg" border="0" alt="four" />
</div>

<div id="image5" style="display:none">
<img src="5.jpg" border="0" alt="five" />
</div>
<br><br>
<a id="one" href="#" onclick="changeIt('image1');">one</a>
<a id="two" href="#" onclick="changeIt('image2');">two</a>
<a id="three" href="#" onclick="changeIt('image3');">three</a>
<a id="four" href="#" onclick="changeIt('image4');">four</a>
<a id="five" href="#" onclick="changeIt('image5');">five</a>
</body>
</html>


1.Copy the above code into an editor say notepad or macromedia dreamweaver.

2. Save it with an .htm or .html extension

3. Make sure that you have 5 images whose names will be 1.jpg, 2.jpg, 3.jpg, 4.jpg and 5.jpg in the same directory/folder where your main web page lies.

Note: You can change the image names in the HTML source code according to your images but keep the Ids like i've mentioned in the above code.

Piper
12-28-2006, 08:50 AM
Is that from a script page? I don't want the images to replace over each other...

codeexploiter
12-28-2006, 08:56 AM
Is that from a script page? I don't want the images to replace over each other...

I don't think i understand your comment properly. You are loading all the five image at the initial time but displaying only one image rest of the images are hidden.

Then based on your link clicking it hide the previous image and display another image..

Piper
12-28-2006, 09:01 AM
Um... not really following that.

As I mentioned in my first post, I want 1 image to load when the page does. I then want 4 links underneath the image. When you click on any of those four links, it replaces the original image with the new one. I don't want 4 images on the page that replace each other.

To be honest I have a lot of trouble with the script you posted because I'm not a coder, it doesn't make sense to me (which is why I'm looking to be pointed to a script, preferably one that has an example)

*edit* Think I've found what I want, just have to figure out how to make it work ><

codeexploiter
12-28-2006, 09:14 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Image Change Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function changeIt(imageName,objName)
{
var obj = document.getElementById(objName);

var imgTag = "<img src='"+imageName+"' border='0' />";

obj.innerHTML = imgTag;

return;
}
</script>
</head>

<body>
<div id="image1">
<img src="1.jpg" border="0" alt="one" />
</div>

<br><br>

<a id="one" href="#" onclick="changeIt('1.jpg','image1');">one</a>
<a id="two" href="#" onclick="changeIt('2.jpg','image1');">two</a>
<a id="three" href="#" onclick="changeIt('3.jpg','image1');">three</a>
<a id="four" href="#" onclick="changeIt('4.jpg','image1');">four</a>
<a id="five" href="#" onclick="changeIt('5.jpg','image1');">five</a>
</body>
</html>


Check this out

X=?
02-25-2007, 04:09 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Image Change Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function changeIt(objName)
{
//The image object accessed through its id we mentioned in the DIV block which is going to be visible currently
var obj = document.getElementById(objName);

//An array that hold the IDs of images that we mentioned in their DIV blocks
var objId = new Array();

//Storing the image IDs into the array starts here
objId[0] = "image1";
objId[1] = "image2";
objId[2] = "image3";
objId[3] = "image4";
objId[4] = "image5";
//Storing the image IDs into the array ends here

//A counter variable going to use for iteration
var i;

//A variable that can hold all the other object references other than the object which is going to be visible
var tempObj;

//The following loop does the display of a single image based on its ID. The image whose ID we passed into this function will be the
//only image that is displayed rest of the images will be hidden based on their IDs and that part has been handled by the else part
//of the if statement within this loop.
for(i=0;i<objId.length;i++)
{
if(objName == objId[i])
{
obj.style.display = "block";
}
else
{
tempObj = document.getElementById(objId[i]);
tempObj.style.display = "none";
}
}
return;
}
</script>
</head>

<body>
<div id="image1">
<img src="1.jpg" border="0" alt="one" />
</div>

<div id="image2" style="display:none">
<img src="2.jpg" border="0" alt="two" />
</div>

<div id="image3" style="display:none">
<img src="3.jpg" border="0" alt="three" />
</div>

<div id="image4" style="display:none">
<img src="4.jpg" border="0" alt="four" />
</div>

<div id="image5" style="display:none">
<img src="5.jpg" border="0" alt="five" />
</div>
<br><br>
<a id="one" href="#" onclick="changeIt('image1');">one</a>
<a id="two" href="#" onclick="changeIt('image2');">two</a>
<a id="three" href="#" onclick="changeIt('image3');">three</a>
<a id="four" href="#" onclick="changeIt('image4');">four</a>
<a id="five" href="#" onclick="changeIt('image5');">five</a>
</body>
</html>


1.Copy the above code into an editor say notepad or macromedia dreamweaver.

2. Save it with an .htm or .html extension

3. Make sure that you have 5 images whose names will be 1.jpg, 2.jpg, 3.jpg, 4.jpg and 5.jpg in the same directory/folder where your main web page lies.

Note: You can change the image names in the HTML source code according to your images but keep the Ids like i've mentioned in the above code.


Hey cool code!

Can you do one where the image will change to another one?
like say in the above, if I click on link one over and over it will load a different image every time I click and so on..?

Thanks again for the cool code!!

chechu
02-25-2007, 12:31 PM
Hey codeexploiter,
Can that script be adapted to the following:
If I want a <td left> with small images, and a <td right> where a bigger version of the img appears on click ?
See here: http://www.dynamicdrive.com/forums/showthread.php?t=17817

naminder
02-11-2008, 07:58 AM
Hi all,

Can any one suggest any code where the image keeps on changing at one place with single button...

Like if i click on a button once first image appears, then if i click on the button again the image changes to second image and so on...

Plz helppppppppp

FireDivine
03-01-2008, 10:10 AM
This code worked greatly. But can someone make it to be with cookies? That way when a link is clicked, the image is still there?




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Image Change Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function changeIt(imageName,objName)
{
var obj = document.getElementById(objName);

var imgTag = "<img src='"+imageName+"' border='0' />";

obj.innerHTML = imgTag;

return;
}
</script>
</head>

<body>
<div id="image1">
<img src="1.jpg" border="0" alt="one" />
</div>

<br><br>

<a id="one" href="#" onclick="changeIt('1.jpg','image1');">one</a>
<a id="two" href="#" onclick="changeIt('2.jpg','image1');">two</a>
<a id="three" href="#" onclick="changeIt('3.jpg','image1');">three</a>
<a id="four" href="#" onclick="changeIt('4.jpg','image1');">four</a>
<a id="five" href="#" onclick="changeIt('5.jpg','image1');">five</a>
</body>
</html>


Check this out

eternea
03-10-2008, 05:19 PM
Hi there,
looks like this code will be very useful to me. I'm using Dreamweaver to built a new site.

My problem is that I'm using a layer to show images on top of a larger image. I have little thumbnails as part of the large image, and so I'm using map/hotspot feature to link. How do I get this 'change on click' funtction to display the images in layer1?

thanks!!!!!

quintencz
05-22-2009, 03:04 PM
Hi,

I've integrated this in VM, which does its job well: http://nowic.nl/ddnyc/index.php?page=shop.product_details&category_id=21&flypage=flypage.tpl&product_id=21&option=com_virtuemart&Itemid=26

Now I previously had a zoom (using moozoom, zooming using mousewheel) on the larger picture: http://nowic.nl/ddnyc/index.php?page=shop.product_details&category_id=21&flypage=flypage2.tpl&product_id=21&option=com_virtuemart&Itemid=26


So now this question: how do I get both the picture change and the zoom working?

Any suggestions?

Jaydah
09-20-2009, 11:34 PM
How do I create an image effect whereby, after clicking on the image it moves aside for a message to appear. Like a Merry Christmas kind of message, image still remains visible after message appears.

Thanks

msramjauny
11-14-2012, 11:55 PM
Hello Codeexploiter,

This looks very interesting to me.

I have 9 sets of pictures and was wondering how to modify your code to include it in a form so that people can choose their favourite picture from each set and when they click on a submit button, they send their favourite choices to me.

djr33
11-15-2012, 02:30 PM
This is an old thread. Please start a new thread if you have a new question about it. (You can link to this thread if you want.)