Zoomer Tutorial

Zoomer description

Zoomer is a basically just a cheap clipping trick. The idea is to setup two images, one twice as large as the other, but completely clipped. Moving the mouse over the smaller image will show the section of the larger image.

Known Issues

Zoomer seems to flake a little in Netscape 6, mostly because NS6 has troubles with tracking the onmousemove event quickly (it appears). The original version of this demo also showed an interesting flaw in NS6, it won't detect mouse events for layers underneath other layers, even if the topmost layer is clipped. To make it more browser-friendly, this version checks for mousemove on the document.

Also, the hardcore will notice there's a little oddness with what the zoomed is showing as compared to where the mouse is pointing on the zoomee. Some of the math could probably be tightened to fix that, but for the purpose of this demo all should be fine.

Step 1: Setup the page with glimmer includes

This demo requires the vis, event, and move modules for glimmer. This is using the new structure of glimmer, which is why event is seperated out. Include the scripts in the header to include them.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>zoomer demo</title>
<SCRIPT src="js/glimmer.js"></script>
<SCRIPT src="js/glimmer_vis.js"></script>
<SCRIPT src="js/glimmer_event.js"></script>
<SCRIPT src="js/glimmer_move.js"></script>

</head>

<body>

</body>
</html>

Step 2: Add in the content DIV's

This demo requires two divs (with a header thrown in here for fun) - the zoomee and the zoomed. The zoomee should be an image half the size (this is not really required, but probably the safest method) of the "original" image which is the zoomed. The stylesheet here is mostly decorative, and I think I stole it from another glimmer demo anyway .

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

h1{
font : 900 xx-large Arial, Helvetica, sans-serif;
}
</STYLE>

</head>

<body >
<DIV id="header"><h1>zoomer</h1></DIV>

</body>
</html>

Step 3: Initialize the layers and clip the zoomed

The init function added here simply calls the initAll to translate the DIVs into layers and then uses the clip method to completely clip the zoomed layer.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

h1{
font : 900 xx-large Arial, Helvetica, sans-serif;
}

</STYLE>
<SCRIPT>
function init() {
initAll();
layer_zoomed.clip(0,0,100,100);
}

</SCRIPT>
</head>

<body onload="init()">
<DIV id="header"><h1>zoomer</h1></DIV>

</body>
</html>

Step 4: Add the "zoomin" function and it's watch

The zoomin function here does all the work. It:

determines the X and Y of the mouse coordinate as it moves
Determines the relative X and Y of the zoomee layer
Bounces the zoomed layer the opposite direction.
Re-clip the zoomed layer based on the mouse position (This is the same trick as scrolling, where you move the layer in one direction, and then re-clip it the same amount.)

A setWatch is then called in the init to watch for mousemove and send the event to zoomin. Remember that a setWatch without a Pager will watch the entire document.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

h1{
font : 900 xx-large Arial, Helvetica, sans-serif;
}

</STYLE>
<SCRIPT>
function init() {
initAll();
layer_zoomed.clip(0,0,100,100);
setWatch("onmousemove",zoomin);
}

function zoomin(event) {
if(document.all){thisY=window.event.clientY;thisX=window.event.clientX;}
else if(document.getElementById || document.layers){thisY=event.pageY;thisX=event.pageX;}
thisX2 = thisX - layer_zoomee.left;
thisY2 = thisY - layer_zoomee.top;
layer_zoomed.bounce(0-thisY2,0-thisX2);
layer_zoomed.clip(thisY2,thisX2,thisY2+100,thisX2+100);
}
</SCRIPT>
</head>

<body onload="init()">
<DIV id="header"><h1>zoomer</h1></DIV>

</body>
</html>

See this in action.