Las Vegas 2005 >

Popup Window Example

One of the most popular ways to present screenshots is to provide a thumbnail graphic like the one here, and enable readers to click the thumbnail to display a larger version in a popup window. Many times the larger version appears in a blank window without the benefit of additional explanation. This example shows you how to maximize the presentation value of such a popup.

The best way to understand in detail how the thumbnail image is set up is to view the source of this page. But here are some the essential components:

  • The image is linked in the traditional way to the larger version of the graphic. Here is an abstracted version of the tag: <a href="small.gif" target="_blank"><img src="large.gif"></a>
  • The link tag is supplemented with a JavaScript function that opens up a new window. The new window does not actually target the larger version of the screenshot, but a web page (screenshot.asp) that has some server-side scripting in it (more on this later). Here is the essential piece of the JavaScript: onClick="popupwindow(1,screenshots.asp,579,470);return false;"
  • The popupwindow function sets the width and height of the new window. Most important, the return false portion of the function call has this effect: if the JavaScript fails, then the traditional image link will still work.
  • The screenshot.asp file accepts several parameters that enable it to display the screenshot with a caption: image= specifies the filename of the larger version of the screenshot; height= and width= specifies the dimensions of the larger screenshot; title= specifies the text to be used as the popup window title and as a bold label under the screenshot; and caption= passes along the caption to be used under the screenshot.

I used Active Server Pages (ASP) as the server-side scripting language, but the same functionality can be accomplished with PHP, JSP or similar languages. If you're not comfortable creating such a script yourself, just show your webmaster the following example (just remove the .txt filename extension):

Copyright © 2005 Frank Elley