The HTML page box2.html shows 6 images that do the mouse-over enlargement trick. It needs to use the absolute positioning its divs are using in order to work. Absolute positioning nails them down nicely so they stay in place, and pre-loading images hidden offscreen makes sure that the expanded image is on the top layer and therefore on top of all else.

The method we need here is to put each big picture on the page twice: one shrunk to thumb size and one big version hidden offscreen. When hovering on the thumbnail picture with a cursor, the hidden big picture is given new left and top positioning coordinates temporarily that in no way interfere with the rest of the page but do stick it on its own layer in the middle of the screen. The original thumbnail is untouched and unaffected.

Note all the parameters needed in the function so that the top and left positioning of the div can get handled:

In the function enlarge(i,t,l) {e=document.getElementById(i);e.style.top=t+'px';e.style.left=l+'px';}, here are the parameter meanings:

i= big div's id

t= big div's top position

l= big div's left position

Each of the 6 images requires a pair of divs—one for the hidden big pop-up image and one for the displayed onscreen thumbnail. Here's one of the pairs:

<DIV id='id1' style="position:absolute;top:60px;left:150px" onMouseOver="javascript:enlarge('id1_big',60,370);return true" onMouseOut="javascript:enlarge('id1_big',0,-600);return true" ><IMG SRC="SteamerOnTrestle2.jpg" WIDTH=150 HEIGHT=222 BORDER=0></DIV>

<div id='id1_big' style="position:absolute; left:-600px; top:0px; width:351px; height:520px;z-index:999"><IMG SRC="SteamerOnTrestle2.jpg" WIDTH=351 HEIGHT=520 BORDER=0></div>

The saved size of the image above is 351 x 520, but you force it to be 150 x 222 until it gets hovered. If you want all pics to be 150 wide as thumbnails, put the larger image in ImageForge or IrfanView and select Resize/Resample and put 150 in the width box and select Preserve Aspect Ratio and you'll see the correct height that will give you the 150 width. Don't actually change the image size in the Resize/Resample dialog—hit Cancel instead. You just needed the info, and you can load one pic after another and get all the info for them all, if you have many.

Note that the big image's left property is -600px at first. That's offscreen—hidden.

I tested the above html codes in IE6, IE7, IE8, Opera, Chrome, Windows Safari, and Firefox and all is well.

You may find that you want your pop-up div to be at a certain place on the screen regardless of window scrolling. That requires document.body.scrollTop and window.pageYOffset properties instead of just sticking in a value like 60 pixels for the top style property in the function. Note that by adding 60 to document.body.scrollTop or window.pageYOffset, the pop-up becomes unconditionally placed at 60 below the top of the screen, while with the earlier code, the pop-up is merely horizontal to the thumbnail it popped from.

<SCRIPT LANGUAGE="JavaScript">
<!--
Netscape=(navigator.appName.indexOf("Netscape") != -1)
var t=0

function enlarge(i,l){e=document.getElementById(i);e.style.left=l+'px';
if (!Netscape){t=document.body.scrollTop+60} else if (Netscape){t=window.pageYOffset+60};e.style.top=t+'px';}

// -->
</script>>

Each of the 6 images requires a pair of divs—one for the hidden big pop-up image and one for the displayed onscreen thumbnail. Here's one of the pairs:

<DIV id='id1' style="position:absolute;top:60px;left:150px" onMouseOver="javascript:enlarge('id1_big',370);return true" onMouseOut="javascript:enlarge('id1_big',-600);return true"><IMG SRC="SteamerOnTrestle2.jpg" WIDTH=150 HEIGHT=222 BORDER=0></DIV>

<div id='id1_big' style="position:absolute; left:-600px; top:0px; width:351px; height:520px;z-index:999"><IMG SRC="SteamerOnTrestle2.jpg" WIDTH=351 HEIGHT=520 BORDER=0></div>

Here's why you might want to use this new code. The way it was earlier on this page, older Firefoxes will likely mess up and possibly Mac Firefox and/or Safari too. After the change to using document.body.scrollTop and window.pageYOffset, browsers that support window.pageYOffset (most everything except IE) will use that and both their new and older versions should work right. Recent changes have allowed newer Firefoxes, Opera, Safari to work with document.body.scrollTop, but they did not used to. The above fix assures that both older and newer browsers work right, since they now support both document.body.scrollTop and window.pageYOffset but did not used to.

The HTML page box2a.html shows this trick.

The HTML page box3a.html shows this same trick with the pop-up above the thumbnails. Of course, it would be easy to use ten 100-pixels-wide thumbnails under or over a 400-pixels-wide pop-up on a normal 1024-pixels-wide screen. Write us with any clever use of these routines on your web pages.

I tested the above html codes in IE6, IE7, IE8, Opera, Chrome, Windows Safari, and Firefox and all is well.

On the following page, the div itself gets enlarged and so does the image, and the z-index gets altered as well, but all this is temporary during mouseover. At mouseout, it all reverts back to the way it was: Enlarging Web Page Images with Mouseover

One trick that's close to mouseover image enlargement is pop-ups; they're not the same, but they're close: Web Page Pop-ups—Fifteen Simple Methods

If you want an enlarger that uses mouse cursor monitoring, try Making an Image Enlarge When The Mouse Cursor Is Hovering Over It