This script gradually magnifies an image as you move towards its original center, similar to effect used in the Dock on a Mac. All you need to do is give an image's class attribute the value 'magnify', like so:
<img src="blah.jpg" class="magnify" />
This script will preserve any existing onmouseover and onmouseout handlers that you add inline or with a script running before this one.
If you want to add an image dynamically, you need to set the onmouseover and onmouseout handlers yourself, like so:
myImg.onmouseover = startResize; myImg.onmouseout = stopResize;
or, for more than one handler:
myImg.onmouseover = function(e) { myHandler(e); startResize(e); }
The variable magLevel is the magnification factor. magLevel = 1 causes the largest magnification of an image to be 100% (ie no change). 2 results in 200%, 3 results in 300%, and so forth.
Rollover the images below to see the effect of the script with a magnification level of 3.
