Identify the source ID on mouse over

[Jack Hagouel]

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

[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

[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

[Jack Hagouel]

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

[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

[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

[RobG]

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

[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