I'm trying to detect mouse position inside the element through on mouse move event but it does not work in Firefox.
function mouseover_imageChange(imgid,imgArr) {
var x= event.pageX- jQuery("#"+imgid).offset().left;
var y= event.pageY- jQuery("#"+imgid).offset().top;
}
Any idea on how to make it work in all browsers, along with the parameters that are needed to be passed to the function?
Thanks, Muhtu
Since you appear to be using jQuery, why not use something like this?
$(document).ready(function () {
var startImgTracker = function (e) {
$(this).mousemove(function (e) {
console.log(JSON.stringify({
"x": e.pageX,
"y": e.pageY,
"relativeX": e.pageX - $(this).offset().left,
"relativeY": e.pageY - $(this).offset().top
}));
});
};
var stopImgTracker = function (e) {
$(this).unbind('mousemove');
};
$('img').hover(startImgTracker, stopImgTracker);
});
Use the hover event to trigger a mousemove handler (which is what you appear to want) and the "stop"hover event to unbind the mousemove. Make sure to include an event argument to get the current pageX and pageY.
This should work in any browser that will run jQuery.
@Muthu
Here is a working demo of "getting X and Y coordinates of the mouse in the viewport" http://jsfiddle.net/XsqBz/
And please find below the complete source. Enjoy.
<!doctype html>
<html lang="en">
<head>
<title>jQuery: Getting X and Y coordinates of the mouse in the viewport</title>
<style>
html{background:#f9f9f9;background-color:#f9f9f9;}
body{background:#fff;background-color:#fff;color:#666;font-family:"Lucida Grande",Verdana,Arial,Georgia,"Bitstream Vera Sans","Bitstream Charter",sans-serif,serif;margin:2em auto;width:700px;padding:1em 2em;-moz-border-radius:11px;-khtml-border-radius:11px;-webkit-border-radius:11px;border-radius:11px;border:1px solid #dfdfdf;}
body{
font-size:11px;
line-height:15px;
background:#fff;
background-color:#fff;
color:#666;
margin-left:20px;
}
strong{font-size:12px;}
a:link{color:#0066CC;}
a:hover{color:#FF6600;}
a:visited{color:#003366;}
a:active{color:#9DCC00;}
p{font-size:18px;}
.relativeX, .relativeY{color:#666;font-size:13pt;}
.relativeX{font-size:48pt;color:#fc0;position:relative;top:-20px;left:30px;}
.relativeY{font-size:52pt;position:relative;top:-09px;left:-10px;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<!-- Move mouse over div to get position -->
<div style="margin:10px;height:400px;width:90%;min-width:420px;background:#ccc;padding:20px;border:1px dotted #777;display:block;">
relative to this
</div>
<script>
(function($) {
$(document).bind('contextmenu', function(){
return false;
});
$('div').mousemove(function(e){
// Relative to this div element instead of document
var relativeX = e.pageX - this.offsetLeft;
var relativeY = e.pageY - this.offsetTop;
$(this).html('releativeX = <span class="relativeX">' + relativeX + '</span>, releativeY = <span class="relativeY">' + relativeY + '</span>');
});
})(jQuery);
</script>
</body>
</html>
window.eventobject in IE.mouseovera is bad selection for this. Trymousemove