Here is an example that creates the html on the fly and displays it in a popup:
<html>
<head>
<title>Image Pop Up Viewer</title>
<script language="JavaScript">
image0=new Image() // preload images large images
image0.src="large0.gif"
image1=new Image()
image1.src="large1.gif"
image2=new Image()
image2.src="large2.gif"
image3=new Image() // preload thumb nail images of large images
image3.src="thumb0.gif"
image4=new Image()
image4.src="thumb1.gif"
image5=new Image()
image5.src="thumb2.gif"
var ImgWin=" "
function imgwin(Imgn) // get width of large image that was pre loaded above
{
w=eval(Imgn+".width")
if(w<100)
{w=100}
h=eval(Imgn+".height") // get height of large image that was pre loaded above
if(h<100) // cannot open window less than 100 by 100 pixels
{h=100}
h=h+25
picgif=eval(Imgn+".src") // build image source
if(ImgWin.open) // if the window is open close it
{ImgWin.close()}
/*Create window and display large image of thumbnail.
If you want to change the position of the window when it pops up change the values for the top and left
properties below in the variable WinProps. The values in top and left are number of pixels from the top
and left of the edge of the screen.
*/
WinProps="width="+w+",height="+h+",location=no,status=no,directories=no,toolbar=no,scrollbars=no,menubar=no,resize=no,top=0,left=0"
ImgWin=window.open("","winimg",config=WinProps);
ImgWin.document.write("<html>")
ImgWin.document.write("<head><title>Display Image</title></head>")
ImgWin.document.write("<body marginheight='0' marginwidth='0' leftmargin='0' topmargin='0' bgcolor='lightyellow'>")
ImgWin.document.write("<center><img src="+picgif+" border='0' hspace=0 vspace=0><br>")
ImgWin.document.write("<font size=-1><a href='#' onClick='self.close()'>Close Me</a></font></center>")
ImgWin.document.write("</body>")
ImgWin.document.write("</html>")
ImgWin.document.close()
ImgWin.focus()
}
</script>
</head>
<body>
<center>
<script>
/*
If you add more thumbnail images make sure that you include the thumbnail and larger image in the
preload sections above. In the onClick event for the added images make sure you change the value
being passed to match the image name of the large image that matches the thumbnail image. Both
of these must be setup in the image preload sections above.
*/
</script>
<br><br><br>
<a href="#" onClick="imgwin('image0');return false;"><img src="thumb0.gif" name="img0" border="0"></a>
<br>
<a href="#" onClick="imgwin('image1');return false"><img src="thumb1.gif" name="img1" border="0"></a>
<br>
<a href="#" onClick="imgwin('image2');return false"><img src="thumb2.gif" name="img2" border="0"></a>
<br><br><br><br> <hr width="50%">
<font size="-1"><a href="JavaScript:self.close()">Close This Window</a></font>
</center>
</body>
</html>