Demo
move magnifer to see zoom images

Loupe.js and Loupe.png allows you to add a loupe (magnifier) to images on your webpages.
It uses unobtrusive javascript to keep your code clean.

It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, IE 6+ and Safari. On older browsers, it’ll degrade and your visitors won’t notice a thing.

how to use


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="expires" content="Fri, 27 Jul 2007 12:00:00 GMT">
<meta http-equiv="imagetoolbar" content="no">
<title>Caribbean</title>
<script type="text/javascript">
// path to "loupe.png"
// var loupePath = "";
</script>
<script src="loupe.js" type="text/javascript"></script>
<!--[if gte IE 6]>
<script type="text/javascript">
	var loupePath = "vml/";
</script>
<script src="vml/loupe.js" type="text/javascript"></script>
<![endif]–>
	<style type="text/css">
		body {
			margin: 0;
			padding: 0;
		 	font-family: georgia,serif;
		 	font-style: italic;
			color: gray;
			background: white;
		}
		#content {
			padding: 0;
			margin-left: 84px;
			margin-top: 40px;
			width: 550px;
		}
		#header {
		 	font-weight: normal;
		}
	</style>
</head>
<body>
<div id="content">
<h2 id="header">Where are the Pirates of the Caribbean?</h2>
<div style="float: left; width:356px; height:205px; background:url(images/caribbean/small.jpg)
no-repeat; border:1px solid gray; margin-right: 1em; margin-bottom: 0.25em;">
<img id="caribbean" onLoad="initLoupe(this.id,true,773,364);" src="images/caribbean/big.jpg"
style="cursor:wait;" width="356" height="205" alt="large image" border="0" />
</div><small>
</small></div>

</body>
</html>

more info
http://www.netzgesta.de/loupe/

Demo
Xray