Drop Down Image Select preview images from an HTML-Select menu ~ Tested in IE5.5, IE6.0, Netscape7.02,Opera7.54 and Firefox0.9.1

T his JavaScript dynamically previews images from an HTML-Select menu. If you have limited space and you have numerous images to be viewed, you may want to check this out.

W e have tested the code in IE5.5, IE6.0, Firefox0.9.1,, Opera7.54 and Netscape7.02. This script worked in IE only. All other platforms tested would not change images and would only see the first image. It degrades well and you will not get any error messages.

D epending on your knowledge of HTML and javascript, this is an easy, three part copy and paste code with minimal reconfigurations. The first part goes in the <HEAD> section of your document (no reconfigurations), the second part goes directly into the <BODY> tag* and the last part goes anywhere into the <BODY> section (where your reconfigurations will be) of your document where you want this effect to appear.

B elow is what the default <BODY> tag look like on the site you get the code. Notice it has "No" attributes other than the onload event handler. You will need to add the font and link color attributes into the <BODY> tag.

<body onLoad="previewImage('myImage')">
<h5>PREVIEW IMAGE onChange</h5>

* If you do not know howto add an onload event handler into the <BODY> tag, see the below example:

I f you grab the below link, you will see how the default code appears directly from the copy and paste code as a complete HTML document.
[ Default Drop Down Image Select ]

N ow that we got that out of the way, lets continue to adding your images into the script. The default comes with three 3 images but you can add as many as you need.

Note!

O n the site you will get the script from, the copy and paste code comes as a complete HTML document. What we have done is mark our source code where the <HEAD> and <BODY> sections of the code both begin and end. The onload event handler in the <BODY> tag is easy to find. If you are not sure about the onload event handler, the below is an actual <BODY> tag with the proper onload event handler inserted (you can copy right from here). The color codes will be a white page (#ffffff) with black font (#000000) and red (#ff0000) links. Just change it to your own colors.

I f the above button does not work correctly, just right click anywhere on this page and then select "View Source".

Default Body Section Of Code

T his part of the code you insert anywhere in the <BODY> section of your document you want this effect to be seen.

<form method="post" action=frm-pc-default.asp>
<table border="1">
<tr>
<td valign=top>Home_image1</td>
<td valign=top>
<select size="1" name="myImage" onChange="previewImage('myImage')">
<option value="Complete Path To Your Uploaded Image" selected onClick="window.open('http://www.internet.com')">Name Of Image</option>
<option value="Complete Path To Your Uploaded Image">Name Of Image</option>
<option value="Complete Path To Your Uploaded Image">Name Of Image</option>
</select>
</td>
</tr>
<tr>
<td>PREVIEW IMAGE</td>
<td><img src="Path To First Image Here" border="0" id="PREVIEW" alt="Alt Tag For All Images On Mouseover"/></td>
</tr>
</table>
</form>

T o add more images into the script, just add an <option value=></option> tag for each image into the code before the closing </select> tag. See the below example:

This is an <option> tag:

<option value="Complete Path To Uploaded Imge">Name Of Image</option>

<form method="post" action=frm-pc-default.asp>
<table border="1">
<tr>
<td valign=top>Home_image1</td>
<td valign=top>
<select size="1" name="myImage" onChange="previewImage('myImage')">
<option value="Complete Path To Your Uploaded Image" selected onClick="window.open('http://www.internet.com')">Name Of Image</option>
<option value="Complete Path To Your Uploaded Image">Name Of Image</option>
<option value="Complete Path To Your Uploaded Image">Name Of Image</option>
<option value="Complete Path To Uploaded Imge">Name Of Image</option>
</select>
</td>
</tr>
<tr>
<td>PREVIEW IMAGE</td>
<td><img src="Path To First Image Here" border="0" id="PREVIEW" alt="Alt Tag For All Images On Mouseover"/></td>
</tr>
</table>
</form>

T he next thing we will cover is the text surrounding the image drop down menu. There are two (2) or possibly three (3) sections where you can add whatever you want.

First Part

<form method="post" action=frm-pc-default.asp>
<table border="1">
<tr>
<td valign=top>Home_image1</td>
<td valign=top>

I n the above section we substituted "Link To Us" for the default of "Home_image1".

Second Part

</select>
</td>
</tr>
<tr>
<td>PREVIEW IMAGE</td>

T he above part we left as-is. We did not change it from the default.

Third Part ~ Optional ~

<option value="https://www.angelfire.com/ny5/consigliere/images/extrayard.gif">Banner #5</option>
</select> Select From The Dropdown Menu Then "Save As"
</td>
</tr>
<tr>

T his part is optional. Insert your text after the last image in the code. Be sure to position your text on the same line and after the closing </select> tag. If you are going to add text here, remember, the length is going to relate to the length of the image(s) being previewed.

Note! The image(s) you insert into this code should be the same height and width. (more emphasis on height). Reason being is quite simple. If the images are not the same height, the form box will jump up and down to accomodate the height of each individual image. This is not a professional effect to have it bounce around like that. Everything below the form will move up and down in relation to the height of the images within the code. All our images are the same size 468 x 60 to avoid any movement within the form box. Also, the width of the form box will be that of the widest image within the code.

I f you would grab the below link, you will see what we are explaining. The third image in the default code is not the same height as the first two. Watch what happens when you got from either the first or second image to the third.
[ Default Drop Down Image Select ]

T he next thing we will cover is the first image URL and alt tag (discription on mouseover) for all the images. The default code does not have the first image (different location, not within the <option> tag) defined. This is why on the default code, when it first loads, you get the infamous little X until the image loads. This can be avoided by the URL (Path) to the first image being defined in this section of code. The alt tag in this section of code is also not defined.

Default Section Of Code

</select>
</td>
</tr>
<tr>
<td>PREVIEW IMAGE</td>
<td><img src="" border="0" id="PREVIEW" alt=""/></td>
</tr>
</table>
</form>

Reconfigured Section Of Code

</select>
</td>
</tr>
<tr>
<td>PREVIEW IMAGE</td>
<td><img src="Path To First Imge Here" border="0" id="PREVIEW" alt="Alt Tag Message Here"/></td>
</tr>
</table>
</form>

W e would also like to suggest if you have numerous images to be previewed, you should use a preload image script so when the image is selected, it does not have to load on call but will already be loaded. To get a preload script, grab the below link and you are there.
[ Preload Script ]

T he last two (2) things we will cover are the border attribute of:

selected onClick="window.open('http://www.internet.com')">

<table border="1"> This denotes the border width (in pixels) around the table. The larget the number, the wider the border. The number zero (0) denotes no border.

<select size="1" name="myImage" onChange="previewImage('myImage')">
<option value="Path To Your First Image" selected onClick="window.open('http://www.internet.com')">Banner #1</option>

N otice in the above the selected onClick, etc with a URL attached to it. This is what is in the default code. First off, it is supposed to on selection of the first image go to that URL. Oops, this function does not work in IE5.5 and IE6.0. It does work in Firefox0.9.1, Opera7.54 and Netscape7.02. The problem now is that the viewing of the images in the drop down form does not work in the three above platforms, just IE5.5 and IE6.0. In other works it is a standoff. So to avoid any problem, just remove the URL. See the below example:

<select size="1" name="myImage" onChange="previewImage('myImage')">
<option value="Path To Your First Image" selected onClick="window.open('')">Banner #1</option>

N otice on the above section of code the ('')". This is not a double quote " but two single apostrophes ' '.

I f you would like to add this effect into your pages, grab the below link and you are there. If you have any problems with this, feel free to contact us.
[ Get Code Here ]

Link To Us	Select From The Dropdown Menu Then "Save As"
PREVIEW