Image Popup Window/DHTML Picture Pop up Java Scrip

This javascript function will help you open a popup image in a new window, you can open images in multiple windows, You can use different events like onclick, onmouseover as you wish and open the picture in a new pop up window.

Features

You can use this popup image function with different events.
This javascript displays image or picture in pop-up windows.
Easy to specify the size of pop up windows.
You can resize the window as you wish.
Just copy the code in to your page and use it.
Simple and ease of use.

Preview

Downloads

Javascript Code

<script type="text/javascript">
var wid = "250";
//Fix the width of Popup Window
var hei = "250";
//Fix the width of Popup Window
function img_popup(form) {
selectionname = form.imagename.options[form.imagename.selectedIndex].text;
selection = form.imagename.options[form.imagename.selectedIndex].value;
Popup = window.open("", "PREVIEW", "toolbar=0,resize=0,status=0,menubar=0,scrollbars=0,width="+wid+",height="+hei);
Popup.document.open();
Popup.document.write("<html><title>Preview</title>");
Popup.document.write("<body BGCOLOR=FFFFFF>");
Popup.document.write("<form><center>" + selectionname + "<hr>");
Popup.document.write("<img hspace=0 vspace=0 " + "src='" + selection + "'>");
Popup.document.write("<hr><input type='button' value='Close' " + "onClick='window.close()'></form>");
Popup.document.write("</center></body></html>");
Popup.document.close();
}
</script>

HTML Code

<form>
<select NAME="imagename" onChange="img_popup(this.form)">
<option value="https://www.hscripts.com/freeimages/icons/money/money-bag/money-bag-clipart10.gif" SELECTED>Image 1
<option value="https://www.hscripts.com/freeimages/icons/money/coin/coin-clipart-picture2.gif">Image 2
<option value="https://www.hscripts.com/freeimages/icons/money/piggy-penny-box/coin-bank-clipart7.gif">Image 3
</select>
</form>

Release Date - 01-12-2007
Get free version without ©copyright link for just $10/-
For customization of this script or any script development, mail to support@hscripts.com

Usage

He we have explained how to use the image pop up javascript with the help of a form. The picture window opens when you click any option in form.
Copy the javascript code into the head part of your HTML page.
Copy the HTML code, This will create a select box with three values, you can also add multiple options.

<form>
<select NAME="imagename" onChange="img_popup(this.form)">
<option value="Your Image" >Image 1
<option value="Your Picture">Image 2
<option value="Your Picture">Image 3
</select>
</form>