JavaScript Routine for Autosizing Image Popup Windows
Clicking on this hyperlink should bring up a popup window containing an image which is automatically resized to fit the image dimensions. The popup should disappear if you click outside it. Note that popups need to be enabled in the browser for this script to work.
Calling sequence: <a href="images/a.jpg" onclick="return openPopup('images/a.jpg','The Fouda Blanc Sangle');">
The first parameter is the URL of the image to be opened, and the second parameter is the caption for the image which is displayed in the window title and in the alt property of the image tag.
If you wish to allow the user to access the popup from the keyboard, simply add the following attribute to the <a> tag:
onkeypress="return openPopup('images/image.jpg','The Fouda Blanc Sangle');"
Note that the above calling sequence will simply open the image in the main window if JavaScript isn't enabled.
Download compressed JavaScript file (2 KB)
One minor problem with the routine is that the window size includes the title bar and margins, so a frig factor has to be added to the size of the image before resizing. Unfortunately, this frig factor is browser dependent. Appropriate values have been added for the Windows XP versions of Opera, and Internet Explorer, and a guess made for any other browsers. With Gecko-based browsers, one can specify the internal window dimensions, so the same problem does not exist.
A second minor problem is that the internal variables defaultWidth and defaultHeight need to be set to greater than the width and height of the largest image to be displayed, to overcome a problem with Mozilla.
The following testing has been carried out. Grateful thanks to Pauline Caldwell for conducting the Mac tests, and to Barbara McCormack for the Windows 98 and Konqueror tests. Further or contradictory test results will be gratefully received as would advice on frig factors to use under specific circumstances. Although as may be seen, the routine is not 100%, it is probably the best implementation available.
| Op. System | Browser | Creates Window | Displays Image | Resizes | Disappears onBlur |
|---|---|---|---|---|---|
| Windows XP | IE V5.01 - 7.0 | OK | OK | OK | OK |
| Windows XP | Avant 8.02 | OK | OK | No | OK |
| Windows XP | Avant 9.02 | OK | OK | No | OK |
| Windows XP | Netscape 4.8 | OK | OK | OK | OK |
| Windows XP | Netscape 6.01 | OK | OK | No | OK |
| Windows XP | Netscape 7.01 - 7.02 | OK | OK | OK | OK |
| Windows XP | Netscape 8.0 | OK | OK | No | OK |
| Windows XP | Mozilla 1.3 - 1.5 | OK | OK | OK | OK |
| Windows XP | Firebird 0.7 | OK | OK | OK | OK |
| Windows XP | Firebird 0.7 with tabs | Unsatisfactory | |||
| Windows XP | Firefox 0.8 - 2.0 | OK | OK | OK | OK |
| Windows XP | Opera 6.05 - 8.0 | OK | OK | OK | OK |
| Windows 98 | IE V6.0 | OK | OK | OK | OK |
| Windows 98 | Opera 7.11 | OK | OK | small | OK |
| Windows 98 | Mozilla 1.5 | OK | OK | No | OK |
| Mac 10.3.2 | IE V5.2 | OK | OK | OK | OK |
| Mac 10.3.2 | Safari 1.1 | OK | OK | OK | No |
| Mac 10.3.2 | Mozilla 1.5 | OK | OK | No | OK |
| Mac 10.3.2 | Firebird 0.7 | OK | OK | No | OK |
| Mac 10.3.2 | Camino (Gecko) | OK | OK | OK | OK |
| Mac 10.3.2 | Omniweb 4.5 | OK | OK | OK | No |
| Mac 10.3.2 | ICab | OK | OK | No | OK |
| Mac 10.3.2 | Opera 6.2 | JavaScript Error | |||
| Linux Red Hat | Konqueror 3.0 | OK | OK | No | No |
