« »

The effect will zoom-in a part of image when user move mouse on image.

Label: Zoom-in image onMouseover

Demo
Enlarge
Reload
New window

Code
JavaScript
HTML
Print

Copy All x2

<SCRIPT language=JavaScript type=text/javascript>
<!--
if (document.all){}
else document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=mtrack;

function mtrack(e) {
var x,y,x1,x2,y1,y2,dx=0,dy=0;
fact=964/512;
opp=100;

if (document.all){
   x=event.x;
   y=event.y;
   dx=window.document.body.scrollLeft;
   dy=window.document.body.scrollTop;
}
else{ 
   x=e.pageX;
   y=e.pageY;
}

x1=-opp+(x+dx)*fact;	//left
y1=-opp+(y+dy)*fact;	//top
x2=+opp+(x+dx)*fact;	//right
y2=+opp+(y+dy)*fact;	//bottom

document.images.een.style.left=(x+dx)*(1-fact);
document.images.een.style.top=(y+dy)*(1-fact);
document.images.een.style.clip="rect(" +y1 +"px," +x2 +"px," +y2 +"px,"	+x1 +"px)";
}

//-->
</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<MAP name=kaart>
	<AREA shape=RECT alt="Vincent Mes" coords=331,258,439,312 href="http://javascriptbank.com/">

	<AREA shape=RECT alt="Vincent Mes" coords=530,258,639,312 href="http://javascriptbank.com/">
</MAP>
<IMG style="LEFT: 0px; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; POSITION: absolute; TOP: 0px; BORDER-BOTTOM-STYLE: none" src="logojs.gif" width=512 name=twee>
<IMG style="LEFT: 0px; POSITION: absolute; TOP: 0px" isMap src="logojs.gif" width=964 useMap=#kaart name=een>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->