By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,851 Members | 1,131 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,851 IT Pros & Developers. It's quick & easy.

Mouse event (onclick)

P: n/a


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).

[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

*** Sent via Developersdex http://www.developersdex.com ***
Jul 23 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
mwh
masantha wee wrote-
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).
[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....
....
Could anyone tell me how could I do it, please?
Thanks in advance.
seanky
well, there is a way to acomplish this using the <map> tag.

<HTML>
....
<IMG height=208 src="someImageSource.jpg" width=241
useMap=#newsplash border=0>

<MAP name=newsplash>

<AREA
onClick="window.alert('Working!!!')"
shape=POLY target=_top
coords=1,2,1,46,78,48,80,197,240,201,239,18,93,12, 94,2 <!--
example of coords -->

<AREA
onClick="window.alert('Working!!!')"
shape=RECT target=_top
coords=someCoords
<AREA
onClick="window.alert('Working!!!')"
shape=RECT target=_top
coords=someCoords
<AREA
onClick="window.alert('Working')"
shape=RECT target=_top
coords=someCoords

</MAP>

</BODY>
</HTML>

Maybe this will help, I hope it does. This should work, but I a no
javascript expert.

(____)
(\/)
/-------\/
/ | MWH ||
- ||----||

Jul 23 '05 #2

P: n/a
"masantha wee" <sa******@yahoo.co.uk> wrote in message
news:X_**************@news.uswest.net...


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).

[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....


Um - can you clarify something?

You say: "without creating any img", then say "eg. in certain areas on an
image"

Do you want an image or not?

If so, then use the MAP and AREA tags to define an image map and assign that
to the image.

If not, then please clarify exactly what you're trying to do.
Jul 23 '05 #3

P: n/a
masantha wee wrote:
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>
The DOCTYPE declaration is missing.
<head>
<script language="javascript">
<script type="text/javascript">

see <http://validator.w3.org/> and numerous discussions here.
document.addEventListener("mousemove", calculatePos, false);
You are trying to assign the event listener before you defined it.
This is not going to work.
function init() {
}
Most certainly to be removed. See below.
function getMousePosition(event) {
var posX = 0;
var posY = 0;
posX = event.clientX + document.body.scrollLeft;
posY = event.clientY + document.body.scrollTop;
To make it work in IE 4+, use

if (!event)
{
event = window.event;
}

prior.
var position = new Array(2);
JS arrays (Array objects) are dynamic by default and due to differences
in implementations it is unwise to try to initialize them with a certain
length; the argument could be interpreted as the value of the first and
only numeric element.

... = new Array();

or even

... = [];

will suffice (although the latter defined in ECMAScript 3+ only and so
not downwards compatible.)
position[0] = posX;
position[1] = posY;
I'd rather define an Object object here:

var position = {x: posX, y: posY};

or

var position = new Object();

Access properties with

position.x
position.y
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;
Leave my status bar alone, provided I even have one.
if (mx > 20 && mx < 80 && my > 40 && my < 100) {
this.onclick = "pop()";
}
OK.
else {
}
To be removed.
}
function pop() {
alert("working!!!");
}
</script>
</head>
<body onload="init();">
Since init() does nothing, remove it and the call (and
the attribute), or let it contain meaningful content.
</body>
</html>

Could anyone tell me how could I do it, please?


If images are not involved, the current approach appears to be viable
(otherwise use image maps); however, the current realization is not.
HTH

PointedEars
Jul 23 '05 #4

P: n/a
Thomas 'PointedEars' Lahn wrote:
<snip>
document.addEventListener("mousemove", calculatePos, false);


You are trying to assign the event listener before
you defined it. This is not going to work.

<snip>

Subject to the W3C DOM events method being defined on the document in
question, that will work. The - calculatePos - function takes the form
of a function declaration within the same script element so the
corresponding function object will be created and assigned to a
'calculatePos' property of the global object during variable
instantiation for the global execution context. That will happen, and be
finished, before any global code is executed. Thus the above method call
will receive a reference to that function object when the Identifier -
calcuatePos - is resolved.

Richard.
Jul 23 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.