image changes on click

**pmaurice** · 02-04-2010, 03:39 AM

This is a great code, but does anyone know how to make it so instead of having the words, one , two, three, four, five appear at the bottom of the page to click on. Can it be small thumbnails of the images.

then when you click on these small thumbnails they appear bigger.

i guess what i am trying to say is, can someone modify this script so you click on small images, instead of the words one, two three etc

Please see the script below, thankyou

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="http://i51.photobucket.com/albums/f370/pmaurice/POOL%20PRODUCTS/SKIMMER%20BOX/SOLARROLLER.jpg" border="0" alt="one" />
</div>

<div id="image2" style="display:none">
<img src="http://i51.photobucket.com/albums/f370/pmaurice/POOL%20PRODUCTS/SKIMMER%20BOX/wall-skimmer-manual.jpg" border="0" alt="two" />
</div>

<div id="image3" style="display:none">
<img src="http://i51.photobucket.com/albums/f370/pmaurice/POOL%20PRODUCTS/SKIMMER%20BOX/main-poster.jpg" border="0" alt="three" />
</div>

<div id="image4" style="display:none">
<img src="http://i51.photobucket.com/albums/f370/pmaurice/POOL%20PRODUCTS/SKIMMER%20BOX/Pool-S1.jpg" border="0" alt="four" />
</div>

<div id="image5" style="display:none">
<img src="http://i51.photobucket.com/albums/f370/pmaurice/OUTDOOR%20FURNITURE/WICKER%20FURNITURE/LARGE%20CNR%20LOUNGE/22.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>

**bluewalrus** · 02-04-2010, 04:21 AM

I think you'd just put the image tag in the link...

<a id="one" href="#" onclick="changeIt('image1');"><img src="address_of_image" alt="one" border="0" /></a>

You'd have to make separate thumbs or resize the image with css or height/width tags.

Thread: image changes on click

Thread Tools

Search Thread

image changes on click

Bookmarks

Bookmarks

Posting Permissions