HTML Forum

**kyle_davis13** · 11-10-2005, 08:11 AM

I want to create a top ten list of products. I want there to be an area at the top of the page displaying the picture of the #1 product. Under this area I want there to be 9 links to the other 9 products. If the user clicks one of these links, I want the area mentioned above to show the picture and information for the user selected product without having to refresh the page. Is this possible?

**funkdaddu** · 11-10-2005, 08:47 AM

You'd want to use either AJAX (Javascript and XML) or the simple way is to use an iFrame:
AJAX: http://www.degraeve.com/reference/si...ax-example.php
iFrame: http://www.lestercat.net/dev/iframe.html

**someguy** · 11-10-2005, 12:55 PM

Can also be done with a Div - using javascript to change the content. Not great if you have a LOT of information to change between though.

**funkdaddu** · 11-10-2005, 01:10 PM

I misunderstood exactly what you were trying to do. You can just use simple JS with an array of all the items and swap them out:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<title>Untitled Page</title>
		<script type="text/javascript"><!--
var products = new Array;
products["GSXR600K6"] = "<b>2006 GSX-R600:</b><br>It started at racetracks far from Suzuki's Hamamatsu, Japan headquarters. A group of dedicated Suzuki engineers on an overseas fact-finding mission wandered through paddocks and spectator parking lots, looking at motorcycles and watching races.\nThe racers at these events didn't have factory contracts, and were not paid to race. They came because they loved the competition, the sport, and they rode motorcycles they bought themselves.";
products["GSXR750K6"] = "<b>2006 GSX-R750:</b><br>GSX-R is more than a model designation.\nWhen the first GSX-R750 was introduced more than two decades ago, it defined an entirely new category of motorcycle: The true racer replica. For more than 20 years, the GSX-R750 has been a direct link between the racetrack and the street.";
products["GSXR1000K6"] = "<b>2006 GSX-R1000:</b><br>In 2005 the GSX-R1000 re-wrote the rule book for liter class supersport bikes. For 2006 the flagship GSX-RTM is poised to blow away the competition. Boasting works inspired technology and class leading performance, the biggest GSX-R combines incredible acceleration with razor sharp handling.";

function changeItem(prod) {
	document.prodImg.src = "http://www.suzukicycles.com/images/ProductImages/logo/500/" + prod + ".jpg";
	document.getElementById("info").innerHTML = products[prod];
}
//-->
</script>
	</head>

	<body bgcolor="#ffffff" onload="changeItem('GSXR600K6');">
		<p>Show info for: <a href="#" onclick="changeItem('GSXR600K6');">GSXR600</a> | <a href="#" onclick="changeItem('GSXR750K6');">GSXR750</a> | <a href="#" onclick="changeItem('GSXR1000K6');">GSXR1000</a> </p>
		<p><img src="" alt="" name="prodImg" border="0"></p>
		<p id="info"></p>
	</body>

</html>

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!