geeky · non php code

simple flip image javascript

sometimes you want an image to change when you select a different option in a dropdown, i used to do it the hard way:

function flip() {
document.images.x.src="themes/x/"+ document.reg.thememem.options[document.reg.thememem.selectedIndex].value+".gif";
}

i had to write a new js function for every new dropdown i use. so i looked for an easier way and wrote something:

function flip(image_id, select_name) { 
document.getElementById(image_id).src = select_name.options[select_name.selectedIndex].value 
}

to use it, do something like:

<select name="myselect" onchange="flip('myImage', this)"> 
<option value="images/candle.gif">candle</option> 
<option value="images/coin.gif">coin</option> 
<option value="images/earth.gif">earth</option> 
</select> <img id="myImage" src="images/balloons.gif">

obviously if you want to call it a second time, just pass a different image_id to it and make sure it matches the id attribute of your second img tag 🙂

4 thoughts on “simple flip image javascript

  1. javascripts.. I always can’t seems to figure out how to use them and when I did.. there are errors and problems here and there… :blush:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s