View Full Version : Changing an image with onClick problem

08-21-2002, 07:42 PM
I'm working on a store that sells clothing. The idea is to have a color swatch bar, that swaps out the product image when someone clicks on one of the swatches.
I'm using a mapped image for my color bar, and onClick for the event handler. It works fine in Netscape, but in IE6 when you click, it switches the image, but the image isn't displayed. If I right-click on the image and select "Show Image", then it displays fine.
I experimented with using onMouseover for this, and it works fine, but the onClick suits my needs better.

Here's my code, including the image map:
<P ALIGN="center">
<IMG SRC="images/swatches/vhat_swatch.gif" WIDTH=400 HEIGHT=100 ALT="" BORDER="0" USEMAP="#picswitch">
<MAP NAME="picswitch">
<AREA SHAPE="rect" COORDS="14,8,70,79" HREF="javascript:void(0);" onClick="changeswatch(swatchwhite);">
<AREA SHAPE="rect" COORDS="90,8,146,79" HREF="javascript:void(0);" onClick="changeswatch(swatchorange);">
<AREA SHAPE="rect" COORDS="170,8,226,79" HREF="javascript:void(0);" onClick="changeswatch(swatchgreen);">
<AREA SHAPE="rect" COORDS="250,8,306,79" HREF="javascript:void(0);" onClick="changeswatch(swatchkhaki);">
<!-- Begin
swatchwhite = new Image()
swatchwhite.src = "images/mens/115_VHVacaHat_White.jpg"
swatchorange = new Image()
swatchorange.src = "images/mens/115_VHVacaHat_Or.jpg"
swatchgreen = new Image()
swatchgreen.src = "images/mens/115_VHVacaHat_Gr.jpg"
swatchkhaki = new Image()
swatchkhaki.src = "images/mens/115_VHVacaHat_Kh.jpg"

function changeswatch(newpic)
document.propic.src = newpic.src

// -->

I can get around this by using the onMouseover, but would really like to use the onClick. Any ideas?