JavaScript Image Drop-Down Selection List

A drop down combo box that allows users to choose among many images to be shown. Each image is linked up to a different URL, and is click able.

Script Demo:

Demo

JavaScript Code:

Insert this code into <head> tags

<script language="javascript">
<!--

/*More resources at:
By  (www.road2webmaster.com)
free tools & resources here!
*/

function linkrotate(which){
var mylinks=new Array()
//add in more links if you want (ie:mylinks[3]=...)
mylinks[0]="URL A"
mylinks[1]="URL B"
mylinks[2]="URL C"

window.location=mylinks[which]
}


function showimage()
{
if (!document.images)
return
document.images.pictures.src=
document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
}
//-->
</script>

Insert this code into <body> tags

<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="A.gif">Description A</option>
<option value="B.gif">Description B</option>
<option value="C.gif">Description C</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="FIRST IMAGE TO DISPLAYED" name="pictures" width="99"
height="100" border=0></a></td>
</tr>
</table>

Instruction:

Change the following text:

FIRST IMAGE TO DISPLAYED - The first image displayed to the user.
A.gif - Thumbnail URL channels.
URL A - Full-size image URL channels.
Description A - Image Description.

Webmaster » Web Programming » JavaScript » Image Effects » Drop-Down Selection List

Related Links:

Home | Sitemap | Bookmark This Page

Sponsored Links

Recommended Links