Change Image shown on mouse click

**Piper** · 12-28-2006, 08: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, 09:46 AM

Code:

<!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, 09:50 AM

Is that from a script page? I don't want the images to replace over each other...

**codeexploiter** · 12-28-2006, 09: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, 10: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, 10:14 AM

Code:

<!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, 05:09 AM

Originally Posted by codeexploiter

Code:

<!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, 01: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/s...ad.php?t=17817

**naminder** · 02-11-2008, 08: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, 11: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?

Originally Posted by codeexploiter

Code:

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

Thread: Change Image shown on mouse click

Thread Tools

Search Thread

Change Image shown on mouse click

Help needed

Bookmarks

Bookmarks

Posting Permissions