return cursor co-ordinates
If you’re going to be using any type of positioning in your web development, it will be absolutely necessary to know and understand how co-ordinates re calculated, returned and altered by the browser. Co-ordinates in a browser are represented by the X axis and Y axis. Each has their own objects and methods to read or alter the X and Y values built in to the browser.
We’ll use the event.clientX and event.clientX attributes to return the values of the current position of the exact tip of the mouse pointer as it sits on the web page the moment the function is triggered. The value is returned very quickly and you can act on and alter that value through scripted action just as quickly.
You’ll see this code in every page you’ve seen that has moveable buttons or flying banners. It’s a universal operation, so it’s best to take a long look at it and commit it to memory. It’s much simpler than it sounds.
<html>
<head>
<script type="text/javascript">
function show_coords(event) {
x=event.clientX;
y=event.clientY;
alert("X coords: " + x + ", Y coords: " + y);
}
</script>
</head>
<body onclick="show_coords(event)">
Click Anywhere To Return The Mouse Position
</body>
</html>
Notice how easy this is? It is very important, though. The script is set up to show an alert box when you click anywhere on the document, as shown through the use of the onClick event handler that has been placed as an attribute of the BODY tag.
|
