Script Categories













Graphic >>> Image Previewer.

Users can see a preview of the image they select from the pulldown menu before loading the full image. They can then view the full image by clicking the Go button or the preview image. This is great for allowing sites with large images to offer image previews visitors to to see an image preview first.



Step 1: Add the below code to the <body> section of your page:

<script language="javascript" type="text/javascript">
/* Visit http://www.yaldex.com/ for full source code
and get more free JavaScript, CSS and DHTML scripts! */
<!-- Begin
function previewPic(sel) {
document.previewpic.src = "" + sel.options[sel.selectedIndex].value;
}
function showPic(sel) {
images = new Array();
images[1] = "toad.jpg";
images[2] = "chameleon.jpg";
images[3] = "lizard.jpg";
images[4] = "gecko.jpg";
window.location.href = images[sel.selectedIndex+1];
}
//  End -->
</script>
<center>
<form name=picform>
<select
name=selbox size=1 onChange="previewPic(this)">
<option
value="toad.jpg">Toad
<option value="chameleon.jpg">Chameleon
<option value="lizard.jpg">Lizard
<option value="gecko.jpg">Gecko
</select>
<br>
<img name="previewpic" src="toad.jpg" width=106 height=64 border=1>
<br>
<input type=button value="Show Image" onclick="showPic(this.form.selbox)">
</form>
</center>

Step 2: The script uses 4 images as part of its interface. You can create your own, or use the 4 below (resized for easier download):

(right click images, and select "Save Image As")
Upload them into the same directory as your webpage.

JavaScript Editor Get Advanced
JavaScript and Ajax Editor,
Validator and Debugger!

1st JavaScript Editor.



Code was highlighted by 1st JavaScript Editor (The Best JavaScript Editor!).




©