/CSS/Get clicked position javascript image

Get clicked position javascript image

 // https://stackoverflow.com/questions/34867066/javascript-mouse-click-coordinates-for-image
  document.getElementById(imageid).addEventListener('click', function (event) {
    // https://stackoverflow.com/a/288731/1497139
    bounds=this.getBoundingClientRect();
    var left=bounds.left;
    var top=bounds.top;
    var x = event.pageX - left;
    var y = event.pageY - top;
    var cw=this.clientWidth
    var ch=this.clientHeight
    var iw=this.naturalWidth
    var ih=this.naturalHeight
    var px=x/cw*iw
    var py=y/ch*ih
    alert("click on "+this.tagName+" at pixel ("+px+","+py+") mouse pos ("+x+"," + y+ ") relative to boundingClientRect at ("+left+","+top+") client image size: "+cw+" x "+ch+" natural image size: "+iw+" x "+ih );
  });

Source: stackoverflow.com

Similar codes

12 votes114 views6 answers
Wordpress enqueue script
CSS
0 vote171 views1 answer
Codemirror resizable
CSS
0 vote110 views1 answer
Anchor links scrolling too far
CSS
0 vote106 views1 answer
Tipografias family style para css y html
CSS
3 votes97 views1 answer
Install expo vector icons
CSS
48 votes109 views3 answers
Custom scrollbar
CSS
58 votes97 views2 answers
How to set css style using jquery
CSS
24 votes109 views4 answers
Use woff2 font in css
CSS
8 votes104 views2 answers
Font roboto css
CSS
1 vote122 views1 answer
Create a animation name in css
CSS