Categories:

Home / Free JavaScripts / Images & Music / Here

Cut & Paste Drop Down Image Selector I

Credit: JavaScript Kit

Description: A drop down combo box that allows surfers to choose among many images to be shown. Notice that in this script, the images themselves are not clickable. If you want the version that not only shows different images, but makes the images clickable as well, see here for Drop Down Image Selector II.

Example:

Directions:

Step 1: Insert the below into the <head> section of your page:

Step 2: Insert the below into the <body> section of your page:

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><form name="mygallery"><p>
<select name="picture" size="1" onChange="showimage()">
<option selected value="me.gif">Picture of me</option>
<option value="myaunt.gif">Picture of my aunt</option>
<option value="brother.gif">Picture of my brother</option>
</select>
</p>
</form>
</td>
</tr>
<tr>
<td width="100%"><p align="center"><img src="me.gif" name="pictures" width="99" height="100"></td>
</tr>
</table>

Having done that, first look at the part in red. This is the part you should change to configure the images that are to be included in the combo box, with "me.gif" representing the file path of the image, and "Picture of me"...etc representing the text to be shown. You can add in as many images as you want by simply adding in more <option> tags.

The part in orange is the image tag of the default image that is to be shown as the page loads. Change that to reflect your own.

Note: This script does not preload images, meaning whenever the surfer first chooses another image, the revealing of the image is not instantaneous. This is a trade-off we decided was worth it, since in an event where there are many images in the combo box, preloading images can seriously slow down the downloading of the document.


JavaScript Tools:
Site Info

CopyRight 1998-2012 JavaScript Kit. NO PART may be reproduced without author's permission.