Drop Down Image Select.. thing?

Set

New Member
Generally I can google and figure things out, but I just cannot figure what this would be called.

You know how on some sites, you select something from a dropdown menu, and it makes an image appear beside it? Lame example but:
http://www.alienaa.com/adopt.html
On this page, changing the color makes the little alien guy change color.

I'm basically wondering how you would do this? Or what it would be called? I assume it's using javascript, but I'm just having a complete mind blank on what to google.
 

PixelPusher

Super Moderator
Staff member
Try searching "onchange javascript select tag", or just "onchange attribute html"

This is a very simple use of js, if you have firebug for firefox you can see how little there is to it.
 

smoovo

New Member
You have a select input with image to be placed (it has to be with id), on change it will fire a function to do something.

HTML:
<img id="image" src="image1.jpg" alt="" />

<select onchange="colors(this.options[this.selectedIndex].value)">
    <option value="1">Red</option>
    <option value="2">Green</option>
    <option value="3">Blue</option>
</select>

<script>
function colors (color){
    document.getElementById("image").src="image"+color+".jpg";
}
</script>

If you still want to search online look for "select box onchange" or "select box dom".

- Enjoy.
 
Top