470,594 Members | 1,442 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,594 developers. It's quick & easy.

Identify the source ID on mouse over

I have the following code:

<li onMouseOver='myid = (typeof event.target != "undefined")?
event.target:event.srcElement.id' id=li15>

I'm trying to assign the value of the element's id to the variable 'myid'
whenever the mouse goes over this element. But myid remains undefined. What
am I doing wrong? Is there a better way to write this code?

Thank you.

Jack
Sep 26 '05 #1
7 7753
ASM
Jack Hagouel a écrit :
I have the following code:

<li onMouseOver='myid = (typeof event.target != "undefined")?
event.target:event.srcElement.id' id=li15>

I'm trying to assign the value of the element's id to the variable 'myid'
whenever the mouse goes over this element. But myid remains undefined. What
am I doing wrong? Is there a better way to write this code?


<li id="lil5"
onmouseover="myid = this.id"
onmouseout="alert('myid = '+myid)">
foo
</li>

perhaps ? event.this.srcElement.id ?
or ? this.event.srcElement.id ?
--
Stephane Moriaux et son [moins] vieux Mac
Sep 26 '05 #2
ASM
Jack Hagouel a écrit :
I have the following code:

<li onMouseOver='myid = (typeof event.target != "undefined")?
event.target:event.srcElement.id' id=li15>

I'm trying to assign the value of the element's id to the variable 'myid'
whenever the mouse goes over this element. But myid remains undefined. What
am I doing wrong? Is there a better way to write this code?


Tell it when you use IE slang,
"There is no public standard that applies to this property."
they say here :
http://msdn.microsoft.com/workshop/a...srcelement.asp

<li id="li_15"
onMouseOver="myid = (typeof event.target != 'undefined')?
event.srcElement.id : event.target"
onMouseOut="alert('myid = '+myid)"> foo </li>

seems to work, don't ask me why ...

--
Stephane Moriaux et son [moins] vieux Mac
Sep 26 '05 #3
ASM <st*********************@wanadoo.fr.invalid> wrote in
news:43**********************@news.wanadoo.fr:
Jack Hagouel a écrit :
I have the following code:

<li onMouseOver='myid = (typeof event.target != "undefined")?
event.target:event.srcElement.id' id=li15>

I'm trying to assign the value of the element's id to the variable
'myid' whenever the mouse goes over this element. But myid remains
undefined. What am I doing wrong? Is there a better way to write this
code?


<li id="lil5"
onmouseover="myid = this.id"
onmouseout="alert('myid = '+myid)">
foo
</li>

perhaps ? event.this.srcElement.id ?
or ? this.event.srcElement.id ?


Stephane,

Thank you, the simple 'this.id' seems to get the id; the problem though
is that there are multiple objects overlapping each other and it gets
the id of the topmost object whereas I need the id of the one on the
bottom (gets the id of the whole list, I need the id of the list item).
Any ideas?

Jack
Sep 26 '05 #4
ASM
Jack Hagouel a écrit :

Stephane,

Thank you, the simple 'this.id' seems to get the id; the problem though
is that there are multiple objects overlapping each other and it gets
the id of the topmost object whereas I need the id of the one on the
bottom (gets the id of the whole list, I need the id of the list item).
Any ideas?


id of all list ?
how many floors ?

<ul id="got_it">
<li>one</li>
<ul>
<li>two</li>
<ul>
<li onmouseover="trick=parent.node.parentNode.parentNo de.id"
onmouseout="alert('trick = '+trick);">three</li>
</ul>
</ul>
</ul>
If you haven't see my other answer which only can work with IE alone
you can also search about 'propagation' and 'stopPropagation'

--
Stephane Moriaux et son [moins] vieux Mac
Sep 26 '05 #5
ASM
ASM a écrit :
correction :

<ul id="got_it">
<li>one</li>
<ul>
<li onmouseover="trick=parentNode.parentNode.id"
onmouseout="alert('trick = '+trick);">two</li>
<ul>
<li onmouseover="trick=parentNode.parentNode.parentNod e.id"
onmouseout="alert('trick = '+trick);">three</li>
</ul>
</ul>
</ul>
<style type="text/css">
li { background:#ff9;border:1px solid red; width: 6em; }
</style>

--
Stephane Moriaux et son [moins] vieux Mac
Sep 26 '05 #6
ASM wrote:
Jack Hagouel a écrit :

Stephane,

Thank you, the simple 'this.id' seems to get the id; the problem
though is that there are multiple objects overlapping each other and
it gets the id of the topmost object whereas I need the id of the one
on the bottom (gets the id of the whole list, I need the id of the
list item). Any ideas?

id of all list ?
how many floors ?

<ul id="got_it">
<li>one</li>
<ul>
<li>two</li>
<ul>
<li onmouseover="trick=parent.node.parentNode.parentNo de.id"
onmouseout="alert('trick = '+trick);">three</li>
</ul>
</ul>
</ul>
If you haven't see my other answer which only can work with IE alone
you can also search about 'propagation' and 'stopPropagation'


In your code (not quoted), 'this' always refers to the element that
fired the onmouseover. There is no need to use event.srcElement (IE) or
event.target (Mozilla) unless you want to get the element that triggered
a bubbling event.

Bubbling can be useful, the onmouseover could be on the parent ul only,
then use target/srcElement to find whatever it was that the mouse was
over (see below).

stopPropagation etc. is only required to prevent bubbling to an event
attached to an element higher up the DOM tree. It seems that the OP's
need is to get down to an element that has a lower z-index that the one
that triggered the event. I don't know if that is possible without
searching down the DOM for a specific element.

<script type="text/javascript">

var myId;

function showID(e)
{
var e = e || window.event;
var tgt = e.target || e.srcElement;
if (tgt.id) myId = tgt.id;

// just for show
document.getElementById('msg').innerHTML = myId;

}

</script>

<ul id="ulList" onmouseover="showID(event);">
<li id="li1">li 1
<li id="li2">li 2
<li id="li3">li 3
</ul>

<div id="msg"></div>

--
Rob
Sep 26 '05 #7
ASM
RobG a écrit :
ASM wrote:
[ a script filled up with errors ]

[...]

Really, it's allways a pleasure to see your scripts
so short, clear and efficient.

But I have some difficulties to follow this concept of target
I did try with :

<div id="ulList" onmouseover="showID(event);">
<p id="li1">li 1
<p id="li2">li 2
<p id="li3">li 3
</div>

and it works too

So I can have an alone roll-over function for
a complete div insteed to have to copy it from links to links ?

Tremendous ! it works here too (2nd underfloor 'a') :

<style>
a { display:block;width: 100%;background:yellow}
</style>
<div id="ulList" onmouseover="showID(event);">
<p><a id="li1">li 1</a>
<p><a id="li2">li 2</a>
<p><a id="li3">li 3</a>
</div>

No deep end with this targeting ?
<script type="text/javascript">

var myId;

function showID(e)
{
var e = e || window.event;
var tgt = e.target || e.srcElement;
if (tgt.id) myId = tgt.id;

// just for show
document.getElementById('msg').innerHTML = myId;

}

</script>

<ul id="ulList" onmouseover="showID(event);">
<li id="li1">li 1
<li id="li2">li 2
<li id="li3">li 3
</ul>

<div id="msg"></div>

--
Stephane Moriaux et son [moins] vieux Mac
Sep 27 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

5 posts views Thread by John Champaign | last post: by
1 post views Thread by Gina | last post: by
3 posts views Thread by Logan Mckinley | last post: by
8 posts views Thread by NeoAsimov | last post: by
1 post views Thread by TheunsP | last post: by
5 posts views Thread by Nikolay Petrov | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.