A browser for your images

Would you like to have an image preview in a small box? This script lets you have it. It combines a form and an image to enable any image to be previewed. The only requisite is to have the image in two different sizes, a small one and a larger one. Here is how to do this:

First, copy this script into the head of your page, specifying in the table images the names of the high-resolution images (my_image1.jpg, my_image2.jpg...) :

<SCRIPT LANGUAGE="JavaScript">
<!--
function previewPic(sel) {
document.previewpic.src = "" + sel.options[sel.selectedIndex].value;
}
function showPic(sel) {
images = new Array();
images[1] = "my_image1.jpg";
images[2] = "my_image2.jpg";
images[3] = "my_image3.jpg";
images[4] = "my_image4.jpg";
window.location.href = images[sel.selectedIndex+1];
}
//  End -->
</script>

Then place the starting image and the associated form where you want. Specify in the following part of the script the thumbnail-images used for the preview, together with their sizes.

<center>
<form name=picform>
<select name=selbox size=1 onChange="previewPic(this)">
<option value="my_image1_small.jpg">Image 1
<option value="my_image2_small.jpg">Image 2
<option value="my_image3_small.jpg">Image 3
<option value="my_image4_small.jpg">Image 4
</select>
<p>
<img name="previewpic" src="my_image1_small.jpg" width=150 height=113 border=1>
<p>
<input type=button value="Enlarge" onclick="showPic(this.form.selbox)">
</form>
</center>

Discover all Webmaster scripts.