PDA

Click to See Complete Forum and Search --> : switch image and drop down list with one click

plastic_chai
07-08-2003, 08:16 PM
Hi there,

I have posted on this issue in the last few days and I have solved it, but now I need to do another trick with the ecommerce page. I need to swap out the product pic and populate the drop down list when the user clicks an image. My code is below and an image is attached to this post.

Thanks.


-----------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="javascript">



function switchSwatch(index) {
document.shopform.color.selectedIndex = index;
switchProduct();
}

//-->

</script>
</head>

<body>
<form name="shopform" method="post" action=""><SELECT NAME="color" SIZE=1>
<option value="Autumn - Multi">Autumn - Multi</option>
<option value="Autumn - Red/Orange">Autumn - Red/Orange</option>
<option value="Autumn - Brown">Autumn - Brown</option>
<option value="Autumn - Plum/Olive">Autumn - Plum/Olive</option>
<option value="Safari - Multi">Safari - Multi</option>
<option value="Safari - Zebra">Safari - Zebra</option>
<option value="Safari - Giraffe">Safari - Giraffe</option>
<option value="Safari - Snake">Safari - Snake</option>
<option value="Bright Colors - Multi">Bright Colors - Multi</option>
<option value="Bright Colors - Reds">Bright Colors - Reds</option>
<option value="Bright Colors - Yellows">Bright Colors - Yellows</option>
<option value="Bright Colors - Purples">Bright Colors - Purples</option>
<option value="Bright Colors - Greens">Bright Colors - Greens</option>
<option value="Bright Colors - Blues">Bright Colors - Blues</option>
<option value="Pastels - Multi">Pastels - Multi</option>
<option value="Pastels - Purple">Pastels - Purple</option>
<option value="Pastels - Pink">Pastels - Pink</option>
<option value="Pastels - Green">Pastels - Green</option>
<option value="Black &amp; White">Black &amp; White</option>
<option value="Solid Black">Solid Black</option>
</select>
<br>
<br>
<table border="2" align="left" cellpadding="0" cellspacing="0" bordercolor="#999999">
<td><div align="center"><a href='javascript:switchSwatch(0)'><img src='images/sm_yellow2.jpg' width="30" height="30" border="0"></a></div></td>
<td><div align="center"><a href='javascript:switchSwatch(1)'><img src='images/sm_baseball.jpg' width="30" height="30" border="0"></a></div></td>
<td><div align="center"><a href='javascript:switchSwatch(2)'><img src='images/sm_pinksoccer.jpg' width="30" height="30" border="0"></a></div></td>
<td><div align="center"><a href='javascript:switchSwatch(3)'><img src='images/sm_soccer.jpg' width="30" height="30" border="0"></a></div></td>
<td><div align="center"><a href='javascript:switchSwatch(4)'><img src='images/sm_peace.jpg' width="30" height="30" border="0"></a></div></td>
<td><div align="center"><a href='javascript:switchSwatch(5)'><img src='images/sm_ying.jpg' width="30" height="30" border="0"></a></div></td>
<td><div align="center"><a href='javascript:switchSwatch(6)'><img src='images/sm_orangered.jpg' width="30" height="30" border="0"></a></div></td>
<td><div align="center"><a href='javascript:switchSwatch(7)'><img src='images/sm_pink.jpg' width="30" height="30" border="0"></a></div></td>
<td><div align="center"><a href='javascript:switchSwatch(8)'><img src='images/sm_purple.jpg' width="30" height="30" border="0"></a></div></td>
<td><div align="center"><a href='javascript:switchSwatch(9)'><img src='images/sm_multi.jpg' width="30" height="30" border="0"></a></div></td>
</tr>
<tr>
<td><div align="center"><a href='javascript:switchSwatch(10)'><img src='images/sm_black.jpg' width="30" height="30" border="0"></a></div></td>
<td><div align="center"><a href='javascript:switchSwatch(11)'><img src='images/sm_multiredblue.jpg' width="30" height="30" border="0"></a></div></td>
<td><div align="center"><a href='javascript:switchSwatch(12)'><img src='images/sm_yellow.jpg' width="30" height="30" border="0"></a></div></td>
<td><div align="center"><a href='javascript:switchSwatch(13)'><img src='images/sm_olive.jpg' width="30" height="30" border="0"></a></div></td>
<td colspan="3"><div align="center"></div>
<div align="center"></div>
<div align="center"><img src="images/liveit_buttonblock.gif" width="90" height="28"></div></td>
<td><div align="center"><a href='javascript:switchSwatch(14)'><img src='images/sm_tropicalred.jpg' width="30" height="30" border="0"></a></div></td>
<td><div align="center"><a href='javascript:switchSwatch(15)'><img src='images/sm_multiredblue.jpg' width="30" height="30" border="0"></a></div></td>
<td><div align="center"><a href='javascript:switchSwatch(16)'><img src='images/sm_tropicalblue.jpg' width="30" height="30" border="0"></a></div></td>
</tr>
<tr>
<td><div align="center"><a href='javascript:switchSwatch(17)'><img src='images/sm_pastelpink.jpg' width="30" height="30" border="0"></a></div></td>
<td><div align="center"><a href='javascript:switchSwatch(18)'><img src='images/sm_giraffe.jpg' width="30" height="30" border="0"></a></div></td>
<td><div align="center"><a href='javascript:switchSwatch(19)'><img src='images/sm_snake.jpg' width="30" height="30" border="0"></a></div></td>
<td><div align="center"><a href='javascript:switchSwatch(20)'><img src='images/sm_zebra.jpg' width="30" height="30" border="0"></a></div></td>
<td><div align="center"><a href='javascript:switchSwatch(21)'><img src='images/sm_safari.jpg' width="30" height="30" border="0"></a></div></td>
<td><div align="center"><a href='javascript:switchSwatch(22)'><img src='images/sm_turtle.jpg' width="30" height="30" border="0"></a></div></td>
<td><div align="center"><a href='javascript:switchSwatch(23)'><img src='images/sm_green.jpg' width="30" height="30" border="0"></a></div></td>
<td colspan="3"><div align="center"></div>
<div align="center"></div>
<div align="center"><img src="images/wearit_buttonblock.gif" width="90" height="28"></div></td>
</tr>
</table>
<br>
</form>
<br>
<p>&nbsp;</p></body>
</html>
:D :D