I want to implement a function, that would open an image at where the cursor is, when hovering over an image. How can this be achieved? I have tried the code list below, but it doesn't seem to work. It makes my website unresponsive. Is there an way to make this work more properly?

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

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

<a href="#" onmouseover="interval()">THIS IS THE LINK</a>

<div style="display: none;" id="image">
   <img src="picture.png" />
</div>

I want to implement a function, that would open an image at where the cursor is, when hovering over an image. How can this be achieved? I have tried the code list below, but it doesn't seem to work. It makes my website unresponsive. Is there an way to make this work more properly?

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

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

<a href="#" onmouseover="interval()">THIS IS THE LINK</a>

<div style="display: none;" id="image">
   <img src="picture.png" />
</div>

• javascript
• html
• css

Share Improve this question Follow edited Feb 25, 2024 at 20:39 Dharman♦ 33.5k2727 gold badges101101 silver badges149149 bronze badges asked Oct 24, 2020 at 15:49 ZharkoZharko 4911 silver badge1010 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Make your image visible.

Add the listener only once on pointermove to not blow up the browser.

let attached = false;
 
let imageContainer = document.querySelector("#image");

const followMouse = (event) => {
  imageContainer.style.left = event.x + "px";
  imageContainer.style.top = event.y + "px";
}

function showImage() {
  if (!attached) {
    attached = true;
    imageContainer.style.display = "block";
    document.addEventListener("pointermove", followMouse);
  }
}

function hideImage() {
  attached = false;
  imageContainer.style.display = "";
  document.removeEventListener("pointermove", followMouse);
}

#image {
  position: absolute;
  display: none;
  width: 50px;
  height: 50px;
  background-color: red;
  pointer-events: none;
}

<a href="#" onpointerenter="showImage()" onpointerleave="hideImage()">THIS IS THE LINK</a>

<div id="image">
</div>

This would actually work better using css instead of javascript, see demo below:

.interval:hover ~ #image {
  display: block;
}

.imageParent {
  display: none;
}

<a href="#" class="interval">THIS IS THE LINK</a>

    <div class="imageParent" id="image">
      <img width="200px"
        src="https://upload.wikimedia/wikipedia/mons/thumb/d/d9/Node.js_logo.svg/1200px-Node.js_logo.svg.png"
      />
    </div>

Try this:

    #imageContainer {
      opacity: 0; # Not visible
    }
    
    #linkWithImage:hover ~ #imageContainer {
      opacity: 1; # Visible
    }
 

    <a id="linkWithImage" href="https://www.breakingbadstore./">Link with image</a>
   
    <div id="imageContainer">
        <img src="https://gcdn.emol.cl/mitos-y-enigmas/files/2019/09/breaking-bad.jpg" width="500px"  />
    </div>

You can do it like this

document.addEventListener("mousemove",function (e) {
            var body = document.querySelector('body');
            var bubbles = document.createElement("span");
            var x = e.offsetX;
            var y = e.offsetY;
            bubbles.style.left = x+'px';
            bubbles.style.top = y+'px';
            var size = Math.random() * 100;
            bubbles.style.width = 20 + size+'px';
            bubbles.style.height = 20 + size+'px';
            body.appendChild(bubbles);

            setTimeout(function () {
                bubbles.remove();
            },4000)
        })

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    overflow: hidden;
    height: 100vh;
}


span{
    position: absolute;
    background: url(https://www.imgworlds./wp-content/uploads/2015/12/18-CONTACTUS-HEADER.jpg);
    background-size: cover;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: animate 10s linear infinite;
}


@keyframes animate{
    0%{
        transform: translate(-50%, -50%);
        opacity: 1;
    }

    100%{
        transform: translate(-50%, -1000%);
        opacity: 0;
    }
}