JavaScript Popup Image Viewer

This is an 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 image 2/3 are different in width and height).

Script Demo:

Demo

JavaScript Code:

Insert this code into <head> tags

<script language="javascript">

/*
More Resources on (http://www.road2webmaster.com)
*/

function display_image() {
selectionname = document.getElementById("imagename").options[document.getElementById("imagename").selectedIndex].text;
selection = document.getElementById("imagename").options[document.getElementById("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>

Insert this code into <body> tags

<FORM>
<select id="imagename" NAME="imagename" onChange="display_image(this.form)">
<option value="Image1" SELECTED>Description 1
<option value="Image2">Description 2
<option value="Image3">Description 3
</select>
</FORM>

Instruction:

Change the following text:

Image1 - Image URL channels.
Description 1 - Image description.

Webmaster » Web Programming » JavaScript » Image Effects » Popup Image Viewer

Related Links:

Home | Sitemap | Bookmark This Page

Sponsored Links

Recommended Links