By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
431,745 Members | 1,873 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 431,745 IT Pros & Developers. It's quick & easy.

change an image based on selected option

P: n/a
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.

Jan 31 '06 #1
Share this Question
Share on Google+
3 Replies


P: n/a
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').sr c =
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">

Jan 31 '06 #2

P: n/a
Nathan White wrote:
[...] 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').sr c =
this.options[this.selectedIndex].value;>
Oh my. The `document.images' collection exists:

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

See also <URL:http://pointedears.de/scripts/test/hoverMe/> for a much
less error-prone approach.
<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
Feb 1 '06 #3

P: n/a
Thanks a lot. It did the job.

Feb 1 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.