JavaScript code that creates an image that follows the cursor
Mark E.
<!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.