Drop Down Image Select ~ Updated ~ Cross Browser Compatible ~ preview images from an HTML-Select menu ~ Tested in IE5.5, IE6.0, Netscape7.02,Opera7.54 and Firefox1.0

T his is an updated JavaScript that dynamically previews images from an HTML-Select menu. New features include browser compatibility and a new look. The below link you can see the "Original" Drop Down Image Select script. (IE Only)
[ Original Drop Down Image Select ]

W e have tested the code in IE5.5, IE6.0, Firefox1.0, Opera7.54 and Netscape7.02. This script worked well in all platforms with no variations observed.

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

T he first reconfiguration(s) we will cover are that of the <table> that surrounds the script.

<table border="1" bgcolor="gold">
<tr>
<td>

<BODY> section of code goes here

</td>
<td valign="center" width="300" align="center"> <img src="Path To Image That Appears When Page Opens" border="0" id="PREVIEW" alt="preview image"/></td>

</tr>
</table>

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

bgcolor="gold"> This denotes the color behind your images inside the table. The color "gold" is the default and you can change it to any color you want to be cosmetic for your site. The below link will show the script in action with the default bgcolor. We changed ours to black (#000000). This color can be either HEX or a word for the color. We also have included a [ Color Picker ] that has both HEX and word colors for your convenience.
[ Default Drop Down Image Select ]

width="300" This size directly relates to the width of the table (in pixels) around the image(s).

Note: A word of advice is to set this number to about 5 to 10 numbers higher than your widest* image. This way when the page opens, the box will not move slightly before it sizes itself to the "Preview" image. (This is the image that appears when the page first opens. On the
[ Default Drop Down Image Select ] it would be the little animated mouse.

<img src="Path To Image That Appears When Page Opens" border="0" id="PREVIEW" alt="preview image"/></td>

This is where to will put the path to your image that will appear on page load.

alt="preview image" This is the text you will see when you place your cursor over any of the images when displayed. The way this script is configured, you "cannot use separate alt tags for each image. What you place in the above section of code will be viewed on all images.

* To make this effect even more professional in appearance, we suggest that all your images are the same size for a very smooth transition from image to image. All the images we used in our example are 468 X 60, which it the standard for banners.,/font>

T he next thing we shall cover are the images and the selection of. The script comes with four (4) images. This can be changed to as many as you need.

<form method="post" name="f" id="f"
action="form_dropdown_image_select_rmk_UNIVERSAL.html">

Select image:<br>
<select name="colortheme" id="colortheme" onChange="previewImage()" size="4">
<option value="Path To Your Uploaded Image">Name Of Image Goes Here
<option value="Path To Your Uploaded Image">Name Of Image Goes Here
<option value="Path To Your Uploaded Image">Name Of Image Goes Here
<option value="Path To Your Uploaded Image">Name Of Image Goes Here
</select>

The words, Select image: are above the little box on the left side of the table. This you can change to whatever you want.
Note: The longer your text the wider the left side box will be. See below:

onChange="previewImage()" size="4"> This number relates to how many rows will be visible in the above box. Default is set for "4".
A smaller number will show less and add scroll bars on the right side of the box. See below:

Select image:

Notice the scroll bars. We have the size= set to "3".

T he last thing to cover is the images themselves. They are basically self explained.

A s we stated earlier, you can add more images to this script. Just follow the pattern and add an <option value tag for each additional image. Be sure to add this tag before the closing </select> tag.

<option value="Path To Your Uploaded Image">Name Of Image Goes Here

Reconfigured With Another Image

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 and howto add it, grab the below link and you are there.
[ Preload Script ]

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.

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

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 ]