Evgeniya,
вариант ...
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
#big_photo{
width: 200px;
height: 100px;
position: absolute;
overflow: hidden;
left: 300px
}
#big_photo img{
position: relative;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
$("#big_photo").mousemove(function(e) {
var offset = $(this).offset();
var divW = $("#big_photo").outerWidth();
var divH = $("#big_photo").outerHeight();
var sW = ($("#big_photo img").outerWidth() - divW)/divW;
var sH = ($("#big_photo img").outerHeight()- divH)/divH;
var relativeX = (e.pageX - offset.left);
var relativeY = (e.pageY - offset.top);
$("#big_photo img").css({
left: -(sW *relativeX)|0,
top: -(sH*relativeY)|0
});
});
});
</script>
</head>
<body>
<div class="tags" id="big_photo"><img src="http://if.mynet.com/93/3/58/1256714b.jpg" border="0" alt="" /></div>
<img src="http://if.mynet.com/93/3/58/1256714b.jpg" border="0" alt="" width="200" />
</body>
</html>