悬停在元素上时使图像跟随光标

Question

I was wondering whether it is possible with JavaScript to create a <a> element which at hover would display an image that follows the position of the mouse.

I found a lot of solutions for the hover part, but I haven't found any which would also follow the mouse.

In other words, on hover, the image doesn't follow the mouse but just appears and dissapears on hover, how can I modify my code in order to make it follow the mouse? This is what I have tried so far :

 <a href="link.html" onmouseover="document.getElementById('hoverimage').style.display = 'block';" onmouseout="document.getElementById('hoverimage').style.display = 'none';">hoverlink</a> <div style="display: none;" id="hoverimage"> <img src="image.png" /> </div> 

Answer 1

Use the clientX and clientY positions of the mouse, and set the top and left style positions of the image to those.

<a href="#" onmouseover="interval()">Link</a>

function interval() {
    while (true) {
        setInterval(showImage, 1);
    }
}

function showImage() {

    var x = clientX;
    var y = clientY;
    var image = document.getElementById("hoverimage");
    image.style.left = x;
    image.style.top = y;
 }

Once you hover on the link, the image will move to the mouse's position once a millisecond, forever.

Answer 2

It is possible. You need to get mouse's clientX and clientY position when hovering over certain element (body, div, etc.) and add that coordinates to your created image