1

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://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></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!

EDIT:

Think I've found out the cause: When the image is being cloned, it is placed right under the cursor, therefore this apparently means for the browser that the mouse is not hovering over the original image anymore and therefore triggers the mouseout event! Is there a way to make an object invisible for the mouse(-events)?

DragonGamer
  • 834
  • 3
  • 9
  • 27
  • Add a console.log() to your mouse event handlers to see how often they trigger. – Jasen Feb 26 '15 at 00:12
  • @Jasen Well, thanks, the result is that even without moving the mouse, the mouseenter and the mouseout events are being called in rhythm >< What could be the reason for that? – DragonGamer Feb 26 '15 at 00:25
  • You can try for a [CSS solution](http://stackoverflow.com/q/18813299/2030565) which I find preferable to hooking into javascript events. – Jasen Feb 26 '15 at 00:34
  • @Jasen Think I've found out the cause: When the image is being cloned, it is placed right under the cursor, therefore this apparently means for the browser that the mosue is not hovering over the original image anymore and therefore triggers the mosueout event! Is there a way to make an object invisible for the mouse(-events)? The CSS Method isn't as flexible as I need it, I fear. – DragonGamer Feb 26 '15 at 00:39
  • You can use [.stopPropagation()](http://api.jquery.com/event.stoppropagation/) to prevent the events from bubbling up to the parent elements. – Jasen Feb 26 '15 at 00:52
  • @Jasen Hmm, is that better than my solution down there? – DragonGamer Feb 26 '15 at 00:57
  • I think it's mostly a matter of style and browser support. Possibly better than stopPropagation() if this can be added to a css class that you add/remove as needed. – Jasen Feb 26 '15 at 01:06

1 Answers1

1

Alright, solved it with a bit googling myself! The reason for the issue was what I edited up there: The new image was overlapping the old one and triggered the old one's mouse-out event.

To prevent that, I used:

currentlyZoomed.css({"pointer-events": "none"});

Now it works like it's meant to!

DragonGamer
  • 834
  • 3
  • 9
  • 27