Categories:

Home / Free JavaScripts / Images & Music / Here

Cut & Paste Drop Down Image Selector II

Credit: JavaScript Kit

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.


JavaScript Tools:
Site Info

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