Mouseover when hovering an inner div

P

pamelafluente

Hi dears,

I have a DIV (with some colorful background). On top of this DIV I
have another
DIV entirely contained and having a transparent background.

Both div absolutely positioned.

onmouseover quits working on the inner div, even though this is
somehow "visually"
counterintuitive. Perhaps, even a mouseout event is issued (not
sure).

Is there some elegant way to keep the onmouseover event even in the
inner (background-transparent) DIV and prevent possible onmouseout ?

I way would seem to duplicate the handler in the inner DIV, but
repetition would
seem quite awkward ... :)

-P
 
P

pamelafluente

I have prepared a test code for my problem.

I would like the cells to change style (back/forecolor) when the mouse
is over but this happens only for a second when the mouse is entering
the outmost DIV.

This is usually logical but in my case being the inned DIV transparent
we
have a behavior that "visually" seems strange.

How would I correct the code below?



SAMPLE
----------------------------------------------


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<style type="text/css" media="screen">
..c1bg{position:absolute;background:#F0FFF0;border-width:1px;border-style:eek:utset;}
..c1fg{position:absolute;border-width:0;color:#000000;background:transparent;text-align:left;font-family:Tahoma;font-size:11px;font-weight:bold;}
</style>
</head>
<body>


<script language="javascript" >


var previousStyle;
function mOver(MyDiv) {

mouseIsOnCellorMenu = true;

if (previousStyle == null) {
previousStyle = MyDiv.style.backgroundColor;
MyDiv.style.backgroundColor = "#ffff99";
}
}

function mOut(MyDiv) {

mouseIsOnCellorMenu = false;

if (previousStyle != null) {
MyDiv.style.backgroundColor = previousStyle;
previousStyle = null;
}

}

</script>


<div id ="RG1,89,1" enabledActions="7,0,5,2,6"
onclick="cellClick(event,this)">
<div class=c1bg onmouseover = "mOver(this)" onmouseout = "mOut(this)"
style="top:10px;left:112px;width:89px;height:20px;"></div><div
class=c1fg style="top:12px;left:114px;"><table><tr><td width=83px
height=14px
valign=middle>San&nbsp;Crist&oacute;bal</td></tr></table></div>
</div>
<div id ="RG1,89,2" enabledActions="7" onclick="cellClick(event,this)">
<div class=c1bg onmouseover = "mOver(this)" onmouseout = "mOut(this)"
style="top:10px;left:204px;width:270px;height:20px;"></div><div
class=c1fg style="top:12px;left:206px;"><table><tr><td width=264px
height=14px
valign=middle>Carrera&nbsp;22&nbsp;con&nbsp;Ave.&nbsp;Carlos&nbsp;Soublette&nbsp;#8-35</td></tr></table></div>
</div>

</body>
</html>


----------------------------------------------




(e-mail address removed) ha scritto:
 
A

ASM

(e-mail address removed) a écrit :
I have prepared a test code for my problem.

Boudiou ! Ma che face ?
What a lot of complications !
(css rules non understood, redondant divs, long js functions)

What is enabledActions ?
I would like the cells to change style (back/forecolor) when the mouse
is over

and why events detection aren't on this td ?
but this happens only for a second when the mouse is entering
the outmost DIV.

you could ask to Google about
- event handler
- event propagation
How would I correct the code below?

To avoid problems the simplest way is to give mouse events to the
element on forground level, preferably TD but last div runs too.

here you are :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css" media="screen">
..c1bg{position:absolute;background:#F0FFF0;border-width:1px;border-style:eek:utset;}
..c1fg{position:absolute;border-width:0;color:#000000;background:transparent;text-align:left;font-family:Tahoma;font-size:11px;font-weight:bold;}
..clg td { white-space: nowrap; }
</style>
</head>
<body>

<script type="text/javascript"><!-- and not language="javascript" -->

function cellClick(event,what) {
alert(what.id)
}
function mOnOver(MyDiv) {
var b = MyDiv.style;
b.backgroundColor = b.backgroundColor==''? '#ff9' : '';
}
</script>

<div id ="RG1,89,1"
enabledActions="7,0,5,2,6"
onclick="cellClick(event,this)">
<div class=c1bg
style="top:10px;left:112px;width:89px;height:20px;">
</div>
<div class=c1fg style="top:12px;left:114px;"
onmouseover="mOnOver(this)" onmouseout="mOnOver(this)">
<table>
<tr><td width=83px height=14px valign=middle>
San Crist&oacute;bal
</td></tr>
</table>
</div>
</div>
<div id ="RG1,89,2" enabledActions="7" onclick="cellClick(event,this)">
<div class=c1bg
style="top:10px;left:204px;width:270px;height:20px;">
</div>
<div class=c1fg style="top:12px;left:206px;"
onmouseover="mOnOver(this)" onmouseout="mOnOver(this)">
<table>
<tr><td width=264px height=14px valign=middle>
Carrera 22 con Ave. Carlos Soublette #8-35
</td></tr>
</table>
</div>
</div>
</body>
</html>
 
P

pamelafluente

Hi stephane!! :)
Boudiou ! Ma che face ?
What a lot of complications !
(css rules non understood, redondant divs, long js functions)

Yes it's a mess I need to take care of it. Please advice!!
What is enabledActions ?

it's an attribute I am adding to define some code action for
interaction
on each cell.
To avoid problems the simplest way is to give mouse events to the
element on forground level, preferably TD but last div runs too.

Thanks. I have seen I can:
1. Remove the outer div
2. Place the handlers in the second changing the coordinates top/left
3. Place the 3rd div within the second

This way it simplifies a lot and works fine.

\\

There is a remaining question. How do I get rid of that (damn) TABLE
structure
which I am using on to vertically center the text ??? Is there a
cleaner (css) way
to position vertically the text ?? I need to be able to do all:
TOP/MIDDLE/BOTTOM.

//

Here is the revised code:

------------------------



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<style type="text/css" media="screen">
..c1bg{position:absolute;background:#F0FFF0;border-width:1px;border-style:eek:utset;}
..c1fg{position:absolute;border-width:0;color:#000000;background:transparent;text-align:left;font-family:Tahoma;font-size:11px;font-weight:bold;}
</style>
</head>
<body>

<script language="javascript" >

var previousStyle;
function mOver(MyDiv) {

mouseIsOnCellorMenu = true;

if (previousStyle == null) {
previousStyle = MyDiv.style.backgroundColor;
MyDiv.style.backgroundColor = "#ffff99";
}
}

function mOut(MyDiv) {

mouseIsOnCellorMenu = false;

if (previousStyle != null) {
MyDiv.style.backgroundColor = previousStyle;
previousStyle = null;
}

}


</script>

<div id ="RG1,89,1" enabledActions="7,0,5,2,6"
onclick="cellClick(event,this)" class=c1bg onmouseover = "mOver(this)"
onmouseout = "mOut(this)"
style="top:10px;left:112px;width:89px;height:20px;">
<div class=c1fg style="top:2px;left:2px;">
<table><tr><td width=83px height=14px
valign=middle>San&nbsp;Crist&oacute;bal</td>
</tr></table>
</div>
</div>

<div id ="RG1,89,2" enabledActions="7" onclick="cellClick(event,this)"
class=c1bg onmouseover = "mOver(this)" onmouseout = "mOut(this)"
style="top:10px;left:204px;width:270px;height:20px;">
<div class=c1fg style="top:2px;left:2px;">
<table><tr><td width=264px height=14px
valign=middle>Carrera&nbsp;22&nbsp;con&nbsp;Ave.&nbsp;Carlos&nbsp;Soublette&nbsp;#8-35</td>
</tr></table>
</div>
</div>

</body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,904
Latest member
HealthyVisionsCBDPrice

Latest Threads

Top