Get image mouse pointing value
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<div id="contentContainer" onclick='point_it(event)'> <img id="thing" src="point.png" style="display:none"> <img src="https://www.citywalksz.com/citywalkszappadmin/tour_service/mapImages/map_41.jpg"><div><script> var theThing = document.querySelector("#thing"); theThing.style.display = 'block'; theThing.style.left = 200+ "px"; theThing.style.top = 250 + "px"; function point_it(event){ var theThing = document.querySelector("#thing"); pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("contentContainer").offsetLeft; pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("contentContainer").offsetTop; // _("maptextBoxTourLatitude").value = pos_x; // _("maptextBoxTourLongitude").value = pos_y; theThing.style.display = 'block'; theThing.style.left = pos_x-15+ "px"; theThing.style.top = pos_y -50 + "px"; } /* var container = document.querySelector("#contentContainer"); container.addEventListener("click", getClickPosition, false); function getClickPosition(e) { var theThing = document.querySelector("#thing"); var parentPosition = getPosition(e.currentTarget); var xPosition = e.clientX - parentPosition.x - (theThing.clientWidth / 2); var yPosition = e.clientY - parentPosition.y - (theThing.clientHeight / 2); theThing.style.display = 'block'; theThing.style.left = xPosition+ "px"; theThing.style.top = yPosition -25 + "px"; } function getPosition(element) { var xPosition = 0; var yPosition = 0; while (element) { xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft); yPosition += (element.offsetTop - element.scrollTop + element.clientTop); element = element.offsetParent; } return { x: xPosition, y: yPosition }; } */ </script> |
Leave a reply