Why won't my picture track the movement of the cursor?

Question

Why won't my picture track the movement of the cursor?

I am trying to make my image follow the cursor using a specific code, but it doesn't seem to be working. I'm having trouble figuring out what's wrong with it.

Here is the code snippet that I'm currently using:

function followIt(e){

    var img=document.getElementById("img");

    img.style.left = e.clientX;
    img.style.top = e.clientY;

}

<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="UTF-8>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title>
</head>

<style>
    #img{
        box-shadow: 0px 0px 1px 1px #000000;
        width: 100px;
    }
</style>

<body id="demo_body" onmousemove="followIt(event)">
<img src="https://i.postimg.cc/g02SqdrF/followmouse.png" id="img">
</body>

<script src="script.js" text="text/javascript"></script>
</html>

javascript html css dom-events

Answer 1

Answer №1

To ensure your image stays in place, utilize CSS properties like position: fixed; since clientX/Y values are relative to the viewport
Include the missing unit of measurement "px" in your JavaScript code
Opt for using addEventListener() over inline event handlers with on*
Avoid querying the DOM within performance-heavy loops; store your element in a variable and use that reference instead

const EL_img = document.querySelector("#img");

function followIt(e) {
  EL_img.style.left = e.clientX + "px";
  EL_img.style.top  = e.clientY + "px";
  // Alternatively:
   // EL_img.style.cssText = `left: ${e.clientX}px; top: ${e.clientY}px;`;
}

window.addEventListener("mousemove", followIt);

#img{
  position: fixed;
  box-shadow: 0px 0px 1px 1px #000000;
  width: 100px;
}

<img id="img" src="https://i.postimg.cc/g02SqdrF/followmouse.png" >

Answer 2

To ensure your image stays in place, utilize CSS properties like position: fixed; since clientX/Y values are relative to the viewport
Include the missing unit of measurement "px" in your JavaScript code
Opt for using addEventListener() over inline event handlers with on*
Avoid querying the DOM within performance-heavy loops; store your element in a variable and use that reference instead

const EL_img = document.querySelector("#img");

function followIt(e) {
  EL_img.style.left = e.clientX + "px";
  EL_img.style.top  = e.clientY + "px";
  // Alternatively:
   // EL_img.style.cssText = `left: ${e.clientX}px; top: ${e.clientY}px;`;
}

window.addEventListener("mousemove", followIt);

#img{
  position: fixed;
  box-shadow: 0px 0px 1px 1px #000000;
  width: 100px;
}

<img id="img" src="https://i.postimg.cc/g02SqdrF/followmouse.png" >

Why won't my picture track the movement of the cursor?

Answer №1

Similar questions

Say goodbye to <!DOCTYPE html> when using htmlAgilityPack

enhancing look of external tool

Error: The constructor for JsSHA is not valid for the TOTP generator

Applying a variety of elements to a single function

Display a loading screen to the user while Vue lazy loads the content

Exploring different methods for drawing a polygon by iterating through JSON values

Slide both divs simultaneously from left to right

Issue with JQuery .fadeToggle() function: Unexpected behavior causing automatic fade-out

"Embrace the power of Ajax and JSON with no regrets

Why Chrome Doesn't Alter the State of li Elements

The drop-down arrow in the <select> element seems determined to stay within the container

Assigning alphanumeric characters to the axis for identification purposes

Is there a way to stop TD from going to the next line?

The Jssor bullet navigator is not visible on the webpage

Client.db is undefined error encountered in MongoDB backend API

Executing tasks in a job on GitHub using Node.JS and .NET

A horizontal navigation bar featuring a centrally aligned vertical layout and full-height display

Tips for storing unique values in an object using JavaScript

What could be causing WidgEditor, the JavaScript text editor, to fail to submit any values?

Attempting to transform HTML code received from the server into an image, but encountering an error while using ReactJS