I know there will possibly be some JS code to add to this project but here goes, I have a list of place names which have coordinates x = 1-100 and y = 1-100, the image is 100x100… What I am looking for is to move a marker (transparent png) over a 100x100 background image. this needs to be animated smoothly when the mouse pointer hovers over a <li> tag, I seem to remember doing it a few years ago but cant find the source. Does anyone have any ideas or suggest a place to look?
This?
I have provided a quick visual of what I am looking to do. Your reply shows how to trigger, but hoiw would i get the x,y coords to the animation? in the image the orange cross needs to be hidden and when the user hovers or clicks on the name in the list the orange cross should travel to the coordinates on the image to point out that star
the list items and coords are taken from a mysqli server along with the coords (but that bit is done already)
Yep some JavaScript will be needed. You are entering the “handle on click” region here.
You probably need to make the pointer absolute position first. and then use JavaScript to manipulate the top: value and left: value relative to the image.
Then for the animation, you can use the @keyframes to set it up and I don’t think you need to use JavaScript for this.
So the JS is only needed to set the top: value and left: value when clicked depending on which #id of the element is clicked.
Here is some articles
I can’t help you with the exact code sorry 
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.