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

Retrieve information from an external source and subsequently make alterations to it

What methods are available to gradually increase a counter until it reaches a specific number by a designated date?

Ensure data accuracy by triggering the cache - implementing SWR hook in Next.js with TypeScript

It is not possible to simultaneously utilize the properties `display: inline-block` and `width: 100%`

Tips for utilizing onsubmit following an ajax validation check

Is there a way to utilize req.query, req.params, or req.* beyond its original scope without the need to store it in a database?

Attempting to implement the tagify plug-in in order to automatically fill a text field with dynamic labels

When adding an object to an array in AngularJS, it seems to trigger updates for

If I change the request mode to 'no-cors' in my Firebase cloud function, how will it impact the outcome?

Displaying various Ajax html responses

modifying a record in MongoDB with the help of Mongoose

Error message encountered when deploying a Discord bot on Heroku: "SyntaxError: Unexpected token '??='"

Highlighting the current menu item by comparing the URL and ID

Is there a way to append the current path to a link that leads to another URL?

What is the process of integrating an ejs view engine with express on Netlify?

Guide on accessing the text content within a div element in HTML by triggering a button click

Conceal a division based on its numerical position

What are the possible arguments for the event type onInput?

Text area capacity

Fixing alignment and responsiveness problems with a hovering circle div