What is the mouse hovering over?

Forum Moderators: open

Message Too Old, No Replies

What is the mouse hovering over?

patriko

11:47 am on May 12, 2006 (gmt 0)

Hey all; is there an event property or some kind of function that will tell me what element (by id, preferably) the mouse is currently hovering over?

I know how to detect what was clicked using srcElement, but I'm not sure about the former. It seems like there should be some event property to determine this, but I can't find it ...

Thanks!

jshanman

1:31 pm on May 12, 2006 (gmt 0)

document.onmouseover = imOn;

var currentObj;//create a global var so you can always know where the user is at

function imOn(e) {
if (!e) e = window.event;
currentObj = e.srcElement;
//alert("Your mouse is on "+currentObj.id);
}

This would give you lots of stuff, and possibly things without id's. If you only want to know about certian elements, then assign a class to those elements, and check for it before changing currentObj...

function imOn(e) {
if (!e) e = window.event;
if (e.srcElement.className == "trackme") {
currentObj = e.srcElement;
alert("Your mouse is on "+currentObj.id);
}
}

- JS

jshanman

2:21 pm on May 12, 2006 (gmt 0)

A better cross-browser version (from quirksmode)...
function imOn(e) {
if (!e) e = window.event;
if (e.target) {
currentObj = e.target;
} else if (e.srcElement) {
currentObj = e.srcElement;
}
if (currentObj.nodeType == 3) currentObj = currentObj.parentNode;
if (currentObj.className == "trackme") {
alert("Your mouse is on "+currentObj.id);
}
}

-JS

birdbrain

2:59 pm on May 12, 2006 (gmt 0)

Hi there patriko,

As using an alert could prove rather aggravating, you may be interested in this variation...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
<!--
form {
width:270px;
}
#stuff {
width:500px;
text-align:justify;
margin-top:40px;
}
-->
</style>
<script type="text/javascript">
<!--
function elemId(ev) {
 el=(ev.target)?ev.target:ev.srcElement;
if(el.id!='') {
 document.getElementsByTagName('textarea')[0].value=
'Your mouse is on the '+el.tagName+'\nit\'s id is "'+el.id+'"';
 }
if(el.tagName=='BODY') {
 document.getElementsByTagName('textarea')[0].value='';
 }
 }
//-->
</script>
</head>
<body onmousemove="elemId(event)">
<form action="#">
<div>
<textarea id="foo" cols="30" rows="5"></textarea>
<input id="blah" type="text"/>
<select id="picker">
<option>selection</option>
<option>Tom</option>
<option>Dick</option>
<option>Harry</option>
</select>
</div>
</form>
<div id="stuff">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula. 
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus 
nisl ac enim. Maecenas vestibulum dolor ut velit.
</div>
</body>
</html>

birdbrain

patriko

1:13 pm on May 16, 2006 (gmt 0)

Sorry for the late reply, but thanks a whole lot! It seems to obvious now -_-, heh.