Cut & Paste Drop Down Image Selector I
|
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.