change an image based on selected option

[Xerxes]

Hi,
I have 3 images of the same product in 3 different colors. I want to
display the correct color product based on what color is selected using
a dropdown.
Can you please tell me how I can do the swapping of the images?

TIA.

 

[Nathan White]

Below is all you need. Realize that you should probably pull the
onchange javascript out and wrap it in a function and do DOM checking
first so you don't product errors in old browsers.

<select onchange="document.getElementById('productPic').src =
this.options[this.selectedIndex].value;>
<option value="null">-- Please Select Product --</option>
<option value="img/src">Image 1</option>
<option value="img/src">Image 2</option>
<option value="img/src">Image 3</option>
</select>

<img id="productPic" src="blank.gif">

 

[Thomas 'PointedEars' Lahn]

[...] Realize that you should probably pull the onchange javascript out
and wrap it in a function and do DOM checking first so you don't product
errors in old browsers.

True, however:

<select onchange="document.getElementById('productPic').src =
this.options[this.selectedIndex].value;>

Oh my. The `document.images' collection exists:

<select onchange="document.images['productPic'].src =
this.options[this.selectedIndex].value;>

<option value="null">-- Please Select Product --</option>

This should not be `null', but refer to a default image. In fact, this
option is nonsensical: The default option should be the one specifying
the initial `src' attribute value of the `img' element.

[...]
</select>

<img id="productPic" src="blank.gif">

Although the `id' attribute should work with `document.images', the `name'
attribute is fully downwards compatible with it to DOM Level 0 (NN3+/IE3+).


PointedEars

 

[Xerxes]

Thanks a lot. It did the job.