Cut & Paste Drop Down Image Selector II
|
Description: A drop down combo box that allows surfers to choose among many images to be shown. Each image is linked up to a different URL, and is clickable. If you simply want an Image Selector that has no links associated with the images, see here for Drop Down Image Selector I.
Example:
Directions:
|
Step 1: Insert the below into the <head> section of your page:
Before moving on, change
mylinks[0]="http://www.abcnews.com"
mylinks[1]="http://www.cnn.com"
"
in function "linkrotate()" to reflect the URL of the first image, second image, and so on of the combo box.
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"><a
href="javascript:linkrotate(document.mygallery.picture.selectedIndex)"
onMouseover="window.status='';return true"><img
src="me.gif" name="pictures" width="99"
height="100" border=0></a></td>
</tr>
</table>
Having done that, first look at the part in
red. This is the part you should change to configure the image that is to be included in
the combo box, with "me.gif" representing the file
path of the images, 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.