what I want to achieve is that when the cursor is hovering over an image (img), this image gets displayed a second time at mouse position. It should disappear when the mouse leaves the original image. And it should work with multiple images on the page.
For this I've written the following page:
<html>
<head>
<script src="http://ift.tt/1xDNnh9"></script> <script>
var currentMousePos = { x: -1, y: -1 };
var currentlyZoomed = -1;
$(document).ready(function(){
$(document).mousemove(function(event) {
currentMousePos.x = event.pageX;
currentMousePos.y = event.pageY;
});
$('.zoomable').mouseenter(function(){
currentlyZoomed = $(this).clone();
currentlyZoomed.removeClass('zoomable');
currentlyZoomed.css({position: "fixed"});
currentlyZoomed.css({left: currentMousePos.x-15, top: currentMousePos.y-15});
currentlyZoomed.appendTo($(this).parent());
});
$('.zoomable').mouseout(function(){
currentlyZoomed.remove();
currentlyZoomed = -1;
});
});
</script>
</head>
<body>
<div>
<img class="zoomable" src="image1.gif"/>
<img class="zoomable" src="image2.gif"/>
</div>
</body>
</html>
Unfortunately, the result in Chrome is that the cloned image "blinks" for some reason. It appears and disappears about once per second.
Any clue what's wrong? Big thanks in advance!
Aucun commentaire:
Enregistrer un commentaire