Javascript Zoom.

[cpugeek]

Is there anyway to create a similar zoom function to the one that appears HERE?[[on thumbnail rollover]]I know they are using scriptaculous & Prototype.I just can't figure out exactly how to make something like THIS.[[they said they modified THIS]]Can anyone help?Any & All Help is appreciated.

[jesh]

I think the following is going on here:1) There are two different sized images. One smaller image used for the thumbnail and another for the "zoom"ed version.2) There is a mouse over event handler that populates a container, typically a div, with the appropriate image.3) The container (div) is positioned, initially, using CSS.4) There is an event handler, probably attached to the mousemove event on the body, that constantly listens for mouse movement and updates some variables that hold the X and Y positions of the mouse cursor.5) On the mousemove event (described in 4 above), javascript and the HTML DOM Style object are used to dynamically position the container div so that it is always just a few pixels to the right of the mouse cursor. This is what makes it move around when you move the mouse. If the mouse is currently over a thumbnail (step 2 above) then the container is visible. If the mouse moves out of the thumbnail, the container goes hidden.6) There is some fancy script that checks for the size of the browser window and determines whether to show the large version above the mouse cursor or below it depending on where in the viewport the mouse cursor currently is.