Forum Academy Marketplace Showcase Pricing Features

Tracking Cursor Movement - CSS DIV Javascript

I am wondering if anyone can help me.

I am trying to follow the cursor as it navigates over the PictureUploader image.with a longer term goal of drawing bounding boxes over different parts of an image.

I got the code for following a cursor from: https://youtu.be/IMV-hf4JIK0

The code is made up of a style sheet style for the cursor:

#cursor {
position: absolute;
width: 20px;
height: 20px;
border: 2px solid #000;
box-sizing: border-box;
transition: 0.1s;
transform: translate(-50%, -50%);
border-radius: 50%;
pointer-events: none;
}

A div tag to capture the cursor which should be on the page:

<div id=“cursor”></div>

And a script to capture the mouse location and track its movement:>

<script type=“text/javascript”>
var cursor = document.getElementById(‘cursor’);
document.addEventListener(‘mousemove’, function(e) {
var x = e.clientX;
var y = e.clientY;
cursor.style.left = x + “px”;
cursor.style.top = y + “px”;
} );

</script>

I would really appreciate any help sorting out where the pieces go to make this work
Even better if someone has a way to draw bounding boxes on an image.

Right now I have used the HTML Element to set the Div Tag

I have used the workflow On Page Load to Add Custom Style to the Head

And finally after the CSS is updated I call the Javascript in the next workflow setp.

Two things are obvious when I preview: There is no round cursor as defined in the style sheet, and when I show page source there is no matching Div Tag or matching style of javascript in the page source.

Thanks again,
Erik