M
masantha wee
Hi all,
I am using Firefox and embedding Javascript in html. I understand that
we can use mouse events by coding them in the body of html (by creating
a button or anything and by adding in the events in the <img> tag).
I am using Firefox and embedding Javascript in html. I understand that
we can use mouse events by coding them in the body of html (by creating
a button or anything and by adding in the events in the <img> tag).
Code:
<input id="StdDev Value" name="StdDevButton" type="button"
value="Standard Deviation Value" onclick="readStdDevValue()"/>
But what if I need to add some mouse events without creating any img or
button? What I mean is - when the mouse cursor is in certain coordinates
(eg. in certain areas on an image), then if the user left click,
something will happen. The beloow example code seems to be not working
for me....
<html>
<head>
<script language="javascript">
document.addEventListener("mousemove", calculatePos, false);
function init() {
}
function getMousePosition(event) {
var posX = 0;
var posY = 0;
posX = event.clientX + document.body.scrollLeft;
posY = event.clientY + document.body.scrollTop;
var position = new Array(2);
position[0] = posX;
position[1] = posY;
return position;
}
function calculatePos (event) {
var mousePosition = getMousePosition(event);
checkAreaIn(mousePosition);
}
function checkAreaIn(mousePosition) {
var mx = mousePosition[0];
var my = mousePosition[1];
window.status = "X= " + mx + " Y= " + my;
if (mx > 20 && mx < 80 && my > 40 && my < 100) {
this.onclick = "pop()";
} else {
}
}
function pop() {
alert("working!!!");
}
</script>
</head>
<body onload="init();">
</body>
</html>
Could anyone tell me how could I do it, please?
Thanks in advance.
seanky