Create a sub-window and dynamically DOM-insert an image

Olivia-Newton John dancing in movie Grease and in an interview Clicking the link will create a new window (popup) or will re-use an already opened one

Krusty the Clown has an hangover Clicking the link will create a new window (popup) or will re-use an already opened one

My backyard Clicking the link will create a new window (popup) or will re-use an already opened one

This demo is unique and is very different from what you can often see in websites, even in tutorials on creating sub-windows. This demo does not use any document.write() call to populate any of the sub-window document. The javascript functions use DOM level 2 methods and properties to populate the sub-window. The sub-window is resizable, has "scrollbars=yes" and is precisely sized. The additional difficulty of this demo was to size the sub-window to the exact dimensions of the images without turning off scrollbars.

The html {overflow:scroll;} default browser css declaration in MSIE 6 for Windows is overriden, so there is no inactive vertical scrollbar. The body {margin: 15px 10px;} default browser css declaration in MSIE 6 for Windows is overriden. The body {margin: 8px;} default browser css declaration in Mozilla-based browsers is overriden. The body {padding: 8px;} css declaration in Opera 7.x is overriden.
To best put to the test this demo, you need to turn off the automatic resizing feature of your browser.
In MSIE 6 for Windows,
Tools/Internet Options.../Advanced tab/Multimedia section/Enable automatic Image Resizing checkbox must be unchecked.
In Mozilla 1.3b+,
Edit/Preferences.../Appearance category/Enable automatic image resizing checkbox must be unchecked.


Valid HTML 4.01! CSS compliant