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.
Click to expand...

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
Click to expand...

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

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

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)
Click to expand...

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

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.
Click to expand...

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

Similar Threads

Hiding 'insert' curson when hovering over text 1
slow response in table cells <TD> to mouseover with IE6 but fine inFirefox. 4
Getting onclick to fire thru absolutely positioned iframe on div 0
cursor postion for DIV relative position - understanding clientX/Y and OffsetX/Y 1
Dynamically Revealed Menu Disappearing Before It Should 1
problem with menu only when page is scrolled down?? 1
Script Callback in ASP.Net 2.0 events to handle 0
Asp.net Important Topics. 0

Members online

Total: 55 (members: 3, guests: 52)
Robots: 449

Forum statistics

Threads
473,990
Messages
2,570,211
Members
46,796
Latest member
SteveBreed

Latest Threads

Top