473,856 Members | 1,622 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Mouse event (onclick)



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="StdDevBut ton" type="button"
value="Standard Deviation Value" onclick="readSt dDevValue()"/>

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="javas cript">
document.addEve ntListener("mou semove", calculatePos, false);
function init() {
}
function getMousePositio n(event) {
var posX = 0;
var posY = 0;
posX = event.clientX + document.body.s crollLeft;
posY = event.clientY + document.body.s crollTop;
var position = new Array(2);
position[0] = posX;
position[1] = posY;
return position;
}
function calculatePos (event) {
var mousePosition = getMousePositio n(event);
checkAreaIn(mou sePosition);
}
function checkAreaIn(mou sePosition) {
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.developersd ex.com ***
Jul 23 '05 #1
4 3670
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="StdDevBut ton" type="button"
value="Standard Deviation Value" onclick="readSt dDevValue()"/>
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="someImageS ource.jpg" width=241
useMap=#newspla sh border=0>

<MAP name=newsplash>

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

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

</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
"masantha wee" <sa******@yahoo .co.uk> wrote in message
news:X_******** ******@news.usw est.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="StdDevBut ton" type="button"
value="Standard Deviation Value" onclick="readSt dDevValue()"/>

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
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="StdDevBut ton" type="button"
value="Standard Deviation Value" onclick="readSt dDevValue()"/>

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="javas cript">
<script type="text/javascript">

see <http://validator.w3.or g/> and numerous discussions here.
document.addEve ntListener("mou semove", 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 getMousePositio n(event) {
var posX = 0;
var posY = 0;
posX = event.clientX + document.body.s crollLeft;
posY = event.clientY + document.body.s crollTop;
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 = getMousePositio n(event);
checkAreaIn(mou sePosition);
}
function checkAreaIn(mou sePosition) {
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
Thomas 'PointedEars' Lahn wrote:
<snip>
document.addEve ntListener("mou semove", 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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

9
22756
by: punkin | last post by:
I am trying to catch mouse position on the entire screen by dynamically generating mouse click event at every 100 ms. My code only works for IEs but not any Netscape or Gecko-based browsers. The following are the problems and I hope that there is someone who can enlighten me or give me some pointers. Also, my testing code is attached at the end. And please don't ask me why I am doing this - it is one of functional requirements by all...
3
4493
by: Rick Strahl [MVP] | last post by:
I'm working on an app that's using the WebBrowser control. I got the control working fine, hooking to the document object. But I've run into a major issue with hooking the Document events. Whenever I hook any of the HTMLDocumnetEvent2_Event events like this: HTMLDocumentEvents2_Event DocEvents = this.Browser.Document as HTMLDocumentEvents2_Event ; DocEvents.oncontextmenu += new...
4
2581
by: Prateek | last post by:
Hi All, I have created an ASP.NET page that basically consists of a table having text boxes in all cells. The table is created using client side java script. There are some calculations being done when user changes text in any text box and moves to the next text box. This is done in the Text Changed event in java script. The problem that I am facing is that, if the user moves from one text box to another using tab key, the performance...
3
1278
by: Qwert | last post by:
Hello, if you have a WebCustomControl ( inherits from System.Web.UI.WebControls.WebControl ), how do you create an event that responses to the movement of the cursor above the control? System.Web.UI.WebControls.ImageButton can determine the location of the mouse relative to its origin. The 'tooltip' event can determine when the mouse is above the control.
4
25155
by: Venkatesh | last post by:
Hello All, I have an iframe in my main html and within iframe, I'm loading another HTML webpage. In my main html page, I've captured the mouse click event, by setting the "onclick" for <bodyof main page. The code is like this: <body onclick="handleClickEvent(event)"> ....
3
2127
by: jbailiss | last post by:
Hi, I've been playing around with trying to get a popup window to open following a mouse click at the position of the mouse. The following (hastily put together) code works in IE but Firefox is unresponsive. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <head> <script language="JavaScript"><!-- function showWindow(e) { posx=0;posy=0; var ev=(!e)?window.event:e;//IE:Moz
2
3785
by: jpk872 | last post by:
i created some javascript DHTML that highlights which menu selection the mouse is currently at, but it won't work on Firefox. Any idea? The source is old, so probably things have changed. <script language=JavaScript> function showMenu(menuToShow) { var srcElement = event.srcElement; var xPos = parseInt(srcElement.offsetLeft); var yPos = parseInt(srcElement.offsetTop);
2
3151
by: markszlazak | last post by:
In the following script, a control displays (black box) in each table cell once you mouse over the cell. Mouse down on the control to change the mode of the table. Drag the mouse over cells in the same column then mouseup anywhere in a cell. The mouseup event sometimres fires before the selection of table cells by dragging is complete. It's important that I stop these "false" mouseup's from firing or distinguish them from when I let go of...
0
9763
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
1
10786
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9532
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7932
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
7097
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5959
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4578
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
4175
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3202
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.