Cut & Paste Pop-up image viewer script

Home / Free JavaScripts / Images & Music / Here

Cut & Paste Pop-up image viewer script

Credit: N/A

Description: This is a useful image viewer script that launches the images in a separate mini window. The great thing about such a script is that the images do not have to be of the same dimensions (notice image 1 and image2/3 are different in width and height).

Example:

Directions

Step 1: Simply paste the below code into the <body> section of your page:

<SCRIPT language="JavaScript"> /* Script posted and featured on JavaScript Kit http://javascriptkit.com */ function display_image(form) { selectionname = form.imagename.options[form.imagename.selectedIndex].text; selection = form.imagename.options[form.imagename.selectedIndex].value; PreView = window.open("", "Preview", "toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,copyhistory=0,width=200,height=255"); PreView.document.open(); PreView.document.write("<HTML><HEAD>"); PreView.document.write("<TITLE>Preview</TITLE>"); PreView.document.write("</HEAD><BODY BGCOLOR=FFFFFF TEXT=000000>"); PreView.document.write("<FORM><CENTER><B><FONT SIZE=+1>" + selectionname + "</FONT></B><HR>"); PreView.document.write("<IMG HSPACE=0 VSPACE=0 " + "SRC='" + selection + "'>"); PreView.document.write("<HR><FORM><INPUT TYPE='button' VALUE='Close' " + "onClick='window.close()'></FORM>"); PreView.document.write("</CENTER>"); PreView.document.write("</BODY></HTML>"); PreView.document.close(); } </SCRIPT> <FORM> <select NAME="imagename" onChange="display_image(this.form)"> <option value="http://www.javascriptkit.com/abstract.gif" SELECTED>Image 1 <option value="http://www.javascriptkit.com/day.gif">Image 2 <option value="http://www.javascriptkit.com/night.gif">Image 3 </select> </FORM> <p align="center"><font face="arial" size="-2">This free script provided by</font><br> <font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript Kit</a></font></p>

Be sure to change the URLs in the <option> tags to your own!

CSS Library | JavaScript & DHTML Menus

JavaScript Tools:

Site Info