In the tutorial “Mouse coordinates (absolute position) with prototype” i have show u how to get the mouse position.
But sometimes we just want to know if the mouse is in a certain element and what position is the mouse in the element.
We use prototype for this.
Download the sample project: project.zip .
In the body of the html we create a div with id debug for showing some important information.
And we create a div with id container, we want to see if the cursor moves over the container-div and get the relative position
of the cursor in the div.
Create a .html page like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Remorse.nl get absolute mouse position relative to a div element</title>
<script type="text/javascript" src="prototype.js" ></script>
<script type="text/javascript" >
function getcordsInDiv(e){
}
</script>
</head>
<body >
<div id="debug" style="position:absolute;left:0px;top:242px;width:400px;border:1px solid #000;height:20px;"></div>
<div id="container" style="border:1px solid #ccc;width:200px;height:200px;cursor:pointer;top:30px;left:200px;position:absolute;"></div>
</body>
</html>
Make sure you have prototype in the same dir as the .html file.
Now let’s write some javascript in the getcordsInDiv function.
Explanation is in the source code:
function getcordsInDiv(e){
//get the position of the container, prototype functionality
var containerLeft = Position.page($('container'))[0];
var containerTop = Position.page($('container'))[1];
//get the mouse coordinates
mouseX = Event.pointerX(e);
mouseY = Event.pointerY(e);
//calculate the absolute mouse position in the div,
//by mouseposition minus left position of the container
horizontalPosition = mouseX - containerLeft;
verticalPosition = mouseY - containerTop;
//use prototypes function to get the dimension
//this is a VERY usefull function because it also checks for borders
containerDimensions = $('container').getDimensions();
height = containerDimensions.height;
width = containerDimensions.width;
//check if the mouse is out or inside the div
//this if statement checks if the cursor is inside the div
if(horizontalPosition < 0 || verticalPosition < 0 || mouseX > (width + containerLeft) || mouseY > (height + containerTop) ){
//just some testing output
$('debug').innerHTML = 'MOUSE OUT OF DIV mouseX:' + horizontalPosition + '-- mouseY:' + verticalPosition;
}else{
//just some testing output
$('debug').innerHTML = 'MOUSE IN DIV mouseX:' + horizontalPosition + '-- mouseY:' + verticalPosition;
}
}
//the event listener
//this could better be a listener on the div element
//but i wanted to allways show the mouse coordinates in the debug div
Event.observe(document, 'mousemove', getcordsInDiv);
That’s easy!
October 20th, 2010 on 02:01
tutorial is nice.. but i have a different problem. I have a swf file running on my page and i want if a user moves the mouse over a particular area then an object or say an image which was hidden till now will appear on the page.. will this coordinate thing work on swf files.. ?