How to detect mouse position over image? (maybe in JQuery)

@JMRKERJun 24.2013 — #No need to use JQuery, but you can modify it if desired.

<i>
 </i>&lt;!DOCTYPE HTML&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt; Untitled &lt;/title&gt;
 &lt;meta charset="utf-8"&gt;
 &lt;style type="text/css"&gt;
 #divID{
 top:50px;
 left:150px;
 position:fixed;
 }
 &lt;/style&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 &lt;form id="myForm"&gt;
 &lt;input type="text" id="coordinates" value=""&gt;&lt;br&gt;
 &lt;div id="divID"&gt;
 &lt;img id="pic" src="http://www.nova.edu/hpd/otm/pics/4fun/PANIC.JPG"&gt;
 &lt;/div&gt;
 &lt;/form&gt;
 
 &lt;script type="text/javascript"&gt;
 // For: http://www.webdeveloper.com/forum/showthread.php?279919-How-to-detect-mouse-position-over-image-%28maybe-in-JQuery%29
 
 (function() {  // Modified from: http://stackoverflow.com/questions/7790725/javascript-track-mouse-position
 var mousePos;
 
 <i>    </i>window.onmousemove = handleMouseMove;
 <i>    </i>setInterval(getMousePosition, 100); // setInterval repeats every X ms
 
 <i>    </i>function handleMouseMove(event) {
 <i>    </i>    event = event || window.event; // IE-ism
 <i>    </i>    mousePos = {
 <i>    </i>        x: event.clientX,
 <i>    </i>        y: event.clientY
 <i>    </i>    };
 <i>    </i>}
 
 <i>    </i>function getMousePosition() {
 <i>    </i>    var pos = mousePos;
 <i>    </i>    if (!pos) {
 <i>    </i>        // We haven't seen any movement yet
 <i>    </i>    }
 <i>    </i>    else { document.getElementById('coordinates').value = pos.x +' : '+ pos.y;
 <i>    </i>        // Use pos.x and pox.y
 <i>    </i>    }
 <i>    </i>}
 })();
 &lt;/script&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;

How to detect mouse position over image? (maybe in JQuery)

1 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

How to detect mouse position over image? (maybe in JQuery)

1 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

1 Comments(s) _↴

Also in #JavaScript _↴