How to change image by changing select box selection

[ELVIS]

A simple question (I think), but rather difficult for a medical doctor not trained in programming.

I have a table with 2 rows: a select box on one row, and a second row where an image will appear. Each select box item has an associated image.

When I make a selection from the select box, I want the associated image to appear.

Could someone point me in the right direction?

Many thanks

 

[BabyJeffy]

Here is a small example that you might be able to use:

<table border="1">
<tr><td>
<select onchange="document.getElementById('swapImg').src=this.value">
<option value="[URL unfurl="true"]http://www.google.com/images/weather/mostly_cloudy.gif">Cloudy</option>[/URL]
<option value="[URL unfurl="true"]http://www.google.com/images/weather/mostly_sunny.gif">Sunny</option>[/URL]
<option value="[URL unfurl="true"]http://www.google.com/images/weather/snow.gif">Snow</option>[/URL]
</select>
</td><td>
<img id="swapImg" src="[URL unfurl="true"]http://www.google.com/images/weather/mostly_cloudy.gif"[/URL] width="40" height="40" alt=""/>
</td></tr>
</table>

If you need a hand building on this... let us know... I've assumed you have an initial image (that matches the first option in the dropdown).

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

 

[ELVIS]

Many thanks!

 

[ELVIS]

Here's another twist...

Can one somehow select the IMAGE and then get the selectBox text to change? (ie the reverse of the above).

Secondly, can one add another selectBox so that a change in selectBox1 causes the image to change PLUS the text in selectBox 2 to change?

 

[BabyJeffy]

Well... to answer the first, you can't put images in a select dropdown - so you would not be able to select the image that way... but presented with a X-by-Y grid of images you could indeed click on an image and set a dropdown to match.

Regards your second question - yes you can do this as well.

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

 

[cLFlaVA]

table layout, huh Jeff? i click my tongue at you.

ELVIS, use code like this to click on an image to change the selectbox value:

<img src="blah.gif" onclick="document.forms['myFormName'].elements['mySelectBoxName'].selectedIndex = 2;" />

the changing of the select box is similar, just use the code in my first example in the instance of Jeff's example.



*cLFlaVA
----------------------------
[tt]( <P> <B>)[sup]13[/sup] * (<P> <.</B>)[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[BabyJeffy]

I was smiling as I typed up the table - I so rarely use them nowadays... although tables are still handy for tabular stuff

I just spent some time researching tables. I was looking at all the different accessibility aspects - summary, caption, scope and stuff. Once upon a time I used tables all the time - but I'd never used these extra tags until I stopped

Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094