JSFiddle - React, Tailwind, and code Playground

by Leo

HTML

<image src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH1wcDFx4CQFwezwAAAB10RVh0Q29tbWVudABDcmVhdGVkIHdpdGggVGhlIEdJTVDvZCVuAAAAMElEQVR42u3SsQ0AIBDDwJj9dzYbvJCgoIjr6KqgZgpQZdqsPKjIzwhJvEZ6tiIHbZYxDxncg4XDAAAAAElFTkSuQmCC'>

<div id="xxxx">&nbsp;</div>
<div id="yyyy">&nbsp;</div>

CSS

#back{
    background:yellow;
    width:400px;
    height:400px;
}

#xxxx {
    background:gray;
    width:200px;
    height:200px;
    top: 60px;
    left: 60px;
    position: absolute;
     cursor:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH1wcDFx4CQFwezwAAAB10RVh0Q29tbWVudABDcmVhdGVkIHdpdGggVGhlIEdJTVDvZCVuAAAAMElEQVR42u3SsQ0AIBDDwJj9dzYbvJCgoIjr6KqgZgpQZdqsPKjIzwhJvEZ6tiIHbZYxDxncg4XDAAAAAElFTkSuQmCC) 8 8, auto;
}


#yyyy {
    background:yellow;
    width:200px;
    height:200px;
    top: 60px;
    left: 260px;
    position: absolute;
     cursor:url(https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678111-map-marker-32.png) 15 43, auto;
}

JavaScript

var t = document.getElementById("xxxx");
t.onclick = function(e)
{
   console.log(e.offsetX+", "+e.offsetY);
}

var tt = document.getElementById("yyyy");
tt.onclick = function(e)
{
   console.log(e.offsetX+", "+e.offsetY);
}