JavaScript code that creates an image that follows the cursor - ITS UP 2 U - Information
ITS UP 2 U - Information

  1. You are here:
  2. Home
  3. JavaScript code that creates an image that follows the cursor

JavaScript code that creates an image that follows the cursor 

<!DOCTYPE html>
<html>
  <head>
    <title>Image Following Cursor</title>
    <style>
      img {
        position: absolute;
      }
    </style>
  </head>
  <body>
    <img src="https://via.placeholder.com/100x100" id="follower" />
    <script>
      var follower = document.getElementById("follower");
      document.addEventListener("mousemove", function (e) {
        var x = e.clientX;
        var y = e.clientY;
        follower.style.left = x + "px";
        follower.style.top = y + "px";
      });
    </script>
  </body>
</html>

This code adds an event listener to the document object for the mousemove event. When the mouse moves, the clientX and clientY properties of the event object are used to set the left and top styles of the image, respectively. The position: absolute; style for the image ensures that it can be positioned anywhere on the page.

You can replace the src attribute of the img tag with the URL of any image you want to use as the follower image.

Click to listen highlighted text!