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>

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>

• javascript
• jquery
• html

Share Improve this question Follow edited Dec 3, 2018 at 22:42 Jack Bashford 44.2k1111 gold badges5555 silver badges8282 bronze badges asked Aug 24, 2018 at 9:08 CodingMageCodingMage 13522 silver badges1717 bronze badges 2

• Have a look at this codepen codepen.io/redspiderfish/pen/MYmeYz – Remco Commented Aug 24, 2018 at 9:15
• Using the codepen above i have editted to do the job you was looking for. Check my codepen out: codepen.io/HeeneyOG/pen/PoJgmNz – Jack H Commented Jan 18, 2022 at 13:18

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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.

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