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