Mouseover when hovering an inner div

Discussion in 'Javascript' started by pamelafluente@libero.it, Sep 7, 2006.

  1. Guest

    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
     
    , Sep 7, 2006
    #1
    1. Advertising

  2. Guest

    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>


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




    ha scritto:

    > 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
     
    , Sep 7, 2006
    #2
    1. Advertising

  3. ASM Guest

    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>

    --
    Stephane Moriaux et son [moins] vieux Mac
     
    ASM, Sep 7, 2006
    #3
  4. Guest

    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>
     
    , Sep 7, 2006
    #4
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. GD
    Replies:
    4
    Views:
    2,224
    =?Utf-8?B?Q3VydF9DIFtNVlBd?=
    Sep 13, 2005
  2. Carlo v. Dango
    Replies:
    14
    Views:
    1,087
    Alex Martelli
    Oct 19, 2003
  3. Pyenos
    Replies:
    2
    Views:
    407
    Pyenos
    Dec 27, 2006
  4. Mc Lauren Series
    Replies:
    3
    Views:
    1,350
    Neredbojias
    Feb 13, 2010
  5. Tom Y
    Replies:
    1
    Views:
    236
    Elegie
    Jul 12, 2011
Loading...

Share This Page