Making an Image Enlarge When The Mouse Cursor Is Hovering Over It
An impressive trick can be done with any of the images on your web page: displaying an enlarged version of the image on top of the image when the mouse cursor hovers the image.
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
If you prefer a mouseover enlarger that pops up the big image away from the thumbnail image, check out Popping Up a Bigger Image to the Side But Not on Top of the Thumbnail Image.
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
Okay—to work. The following is an enlarger of images that relies on monitoring the mouse cursor coordinates.Below is the code that makes the magic happen.
<table style="position:absolute;top:1500px;left:265px" align="left" border="1" width="50" height="50" cellspacing=0 cellpadding=0>
<tr>
<td width="50" height="50"><IMG SRC="doorknob.gif" WIDTH=50 HEIGHT=50 BORDER=0 onMouseOver="javascript:if(k==0){move(265);k=1;}return true"></td>
</tr>
</table>
Above is the table that contains the image to hover over, and the javascript that (when the mouse hovers) runs the function that displays the larger image. Immediately below is the bigger image which loads with the rest of the page, but it's at left=-500px so no one can see it until the move routine kicks in during hovering. And why is there no onMouseOut above, you ask. We're glad you asked. You can't register an onMouseOut for an image that's covered by another image. They're on different z-index layers so there's no way the mouse can register leaving an image it can't even find any more! So we have to resort to parameter checking and mouse coordinate checking routines, as described below.
<div id="o" style="position:absolute; left:-500px; top:1500px; width:400px; height:400px; border:3px groove #888;"><IMG SRC="doorknob-big.gif" WIDTH=400 HEIGHT=400 BORDER=0></div>
Below is mouse coordinate checking and parameter checking code found in the script part of the page's head section. First is declaring of the critical x and y variables. Next is finding out if the user has Firefox/Mozilla/Netscape. Next is the event capturing function (run with onLoad in the body tag: <body onload="startmouse()">) that starts mouse coordinate checking beginning at page load and continuing until the page is exited. Next is the mouse coordinate checker function the previous function starts up. Just before exiting this function we use a parameter checker that sees if the cursor is over the big image. The image is at xx position (left) and yy position (top) with width ww and height hh. The parameter checker hides the big image at left=-500 once the cursor is off the image—acting like onMouseOut should have acted. More on this bug in the browsers.
<SCRIPT LANGUAGE="JavaScript">
<!--
var x = 0;
var y = 0;
var Netscape=(navigator.appName.indexOf("Netscape") != -1);
function startmouse() {if(Netscape) {document.captureEvents(Event.MOUSEMOVE);}
document.onmousemove=getCoords;
}
function getCoords(e){
if (!e) var e = window.event;
if (e.pageX){
x = e.pageX;
y = e.pageY;
}
else if (e.clientX){
x = e.clientX + document.body.scrollLeft;
y = e.clientY + document.body.scrollTop;
}
if(k==1&&(x>(xx+ww)||x<xx||y>(yy+hh)||y<yy))
{k=0;move(-750);}
}
var k = 0;
var yy = 1800;
var xx = 265;
var ww = 50;
var hh = 50;
function move(l){e=document.getElementById('o');e.style.left=l;}
//-->
</script>
