Let's now go one step further than just creating a popup window containing a larger version of the thumbnail image. Let's create a complete web page to hold both the image and a cation describing the image. We can also set it up so that the window closes automatically when the mouse is clicked anywhere in the popup.
We will begin by looking at the code for the function that displays the popup. The code to do this is a combination of most of what we have learned in the earlier tutorials. It looks like this:
origLeft,origTop,capt) {var mh = myHeight + 44;
var mw = myWidth + 24;
TheImgWin = window.open('','image','height=' + mh +
',width=' + mw + ',toolbar=no,directories=no,status=no,' + 'menubar=no,scrollbars=no,resizable=no');TheImgWin.resizeTo(mw+2,mh+30);
TheImgWin.document.write('<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http:\/\/www.w3.org\/1999\/xhtml">');TheImgWin.document.write('<head><title>Popup<\/title
><\/head>');TheImgWin.document.write('<body style="overflow:hidden"
bgcolor="#ffffff" onclick="self.close()">');TheImgWin.document.write('<img src="'+myImage+'"
width="'+myWidth+'" height="'+myHeight+'" ');TheImgWin.document.write('border="0" alt="'+capt+'"\/><p
align="center">'+capt+'<\/p>');TheImgWin.document.write('<\/p><\/body><\/html>');
TheImgWin.moveTo(origLeft,origTop);
TheImgWin.focus();
}
The code for the thumbnail image also needs to be changed slightly to this:
onclick="goImgWin('graphics/convent.jpg',240,302,100,50
,'Stephen Chapman'); return false;"><img src="http://localhost/Files/File/2007-12/22/AK504G20JH0D319KCC.jpg""
width="57" height="72" border="1"
alt="Picture of Stephen Chapman at the AMRA 50th Anniversary Convention" align="left" /></a>
Well there you are, a popup window that sizes itself appropriately to display an image along with a short caption that will also close itself automatically when the window is clicked on.