newbie7,
Вариант...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Прикольный виджет</title>
<style type="text/css">
.lupe {
border: gray 4px solid;
width: 200px;
height: 200px;
position: absolute;
background-repeat: no-repeat;
background-color: white;
border-radius: 200px;
}
</style>
</head>
<body>
<img id="image" src="http://4.bp.blogspot.com/-PaPJ6ulqi9c/Tf1-QMenB1I/AAAAAAAAADs/U_31Ap2LIjA/s1600/novye-interesnye-fotografii-ot-national-geographic-4.jpg" alt="" width="400">
<img id="image2" src="http://2.bp.blogspot.com/-Edrn-TiDZlw/UPha3ogDR1I/AAAAAAAAA9s/esDb0tWcCdA/s1600/DSC06442.JPG" alt="" width="400">
<script type="text/javascript">
var Imgt = function (id) {
if (!(this instanceof Imgt)) {
return new Imgt(id);
}
this.element = document.getElementById(id);
this.addEvent('mouseover', Imgt.createLupe);
this.addEvent('mouseout', Imgt.deleteLupe);
this.addEvent('mousemove', Imgt.shower);
};
Imgt.pss = !1;
Imgt.coords;
Imgt.lupe = document.createElement('div');
Imgt.createLupe = function () {
var lupe = Imgt.lupe;
lupe.className = 'lupe';
document.getElementsByTagName('body')[0].appendChild(lupe);
lupe.style.backgroundImage = 'url(' + this.src + ')';
Imgt.coords = this.getBoundingClientRect()
};
Imgt.deleteLupe = function () {
var lupe = Imgt.lupe;
lupe.parentNode.removeChild(lupe);
};
Imgt.shower = function (e) {
if (Imgt.pss) return;
Imgt.pss = !0;
window.setTimeout(function () {
Imgt.pss = !1
}, 40)
var lupe = Imgt.lupe,
event = e || window.event,
eX = event.x || event.clientX,
eY = event.y || event.clientY,
y = -(eY - Imgt.coords.top) * 4 + 100 + 'px',
x = -(eX - Imgt.coords.left) * 4 + 100 + 'px';
lupe.style.top = 10 + eY + 'px';
lupe.style.left = 10 + eX + 'px';
lupe.style.backgroundPosition = x + ' ' + y;
};
Imgt.prototype.addEvent = function (event, handler) {
var element = this.element;
if (element.addEventListener) {
return element.addEventListener(event, handler);
} else if (element.attachEvent) {
return element.attachEvent('on' + event, handler);
}
};
var i = new Imgt('image');
var i2 = new Imgt('image2');
</script>
</body>
</html>