DHTML Problem with DIV and OnMouseOver

Discussion in 'HTML' started by John Smith, Dec 18, 2003.

  1. John Smith

    John Smith Guest

    I have a DIV element containing some text. I have onmouseover and on
    mouseout events declared. However, the onmouseover event only fires with the
    mouse is over the actual text, and not the div as a whole. I have tried
    setting the div style to display:block, but it makes no difference. Any
    ideas?

    <DIV id='divTest' OnMouseOver='changeColor()' OnMouseOut='revertColor()'>
    Hello, this is some test text!
    </DIV>

    javascript:

    function changeColor(){
    document.all('divTest').style.backgroundColor='red';
    }

    function revertColor(){
    document.all('divTest').style.backgroundColor='blue';
    }
     
    John Smith, Dec 18, 2003
    #1
    1. Advertising

  2. John Smith

    altamir Guest

    "John Smith" <> wrote in
    news:DPjEb.6755$:

    > I have a DIV element containing some text. I have onmouseover and on
    > mouseout events declared. However, the onmouseover event only fires
    > with the mouse is over the actual text, and not the div as a whole. I
    > have tried setting the div style to display:block, but it makes no
    > difference. Any ideas?


    which browser, which version?


    > <DIV id='divTest' OnMouseOver='changeColor()'
    > OnMouseOut='revertColor()'>
    > Hello, this is some test text!
    > </DIV>


    try

    <div onmouseover="this.style.backgroundColor='red'" ... >
    ....
    </div>

    > javascript:
    >
    > function changeColor(){
    > document.all('divTest').style.backgroundColor='red';
    > }


    document.all is a microsoft idea. it's better to have
    document.getElementById('divTest').style.backgroundColor='red' which is
    supported in most of the modern browsers.

    --
    altamir
     
    altamir, Dec 18, 2003
    #2
    1. Advertising

  3. John Smith

    John Smith Guest

    Thanks. I'm using IE6. The example I gave actually works fine but my real
    code doesn't, and I'm not sure what the difference is. My actual code is:

    <div id="chartmenu" class="ContextMenu" style="VISIBILITY:hidden"
    ONMOUSEOUT="this.tid = setTimeout('chartmenuhide(event)', 900);"
    ONMOUSEOVER="clearTimeout(this.tid);">
    <div class="ContextMenuItem" id="ChartMenuItemAdd"
    onMouseover="chartmenuhighlight(event)"
    onMouseout="chartmenulowlight(event)">
    Add to Graph
    </div>
    </div>

    The onMouseover="chartmenuhighlight(event)" only fires when I'm over the
    'Add to Graph' text.

    "altamir" <> wrote in message
    news:Xns9455C54C1D802alt2003@213.180.128.20...
    > "John Smith" <> wrote in
    > news:DPjEb.6755$:
    >
    > > I have a DIV element containing some text. I have onmouseover and on
    > > mouseout events declared. However, the onmouseover event only fires
    > > with the mouse is over the actual text, and not the div as a whole. I
    > > have tried setting the div style to display:block, but it makes no
    > > difference. Any ideas?

    >
    > which browser, which version?
    >
    >
    > > <DIV id='divTest' OnMouseOver='changeColor()'
    > > OnMouseOut='revertColor()'>
    > > Hello, this is some test text!
    > > </DIV>

    >
    > try
    >
    > <div onmouseover="this.style.backgroundColor='red'" ... >
    > ...
    > </div>
    >
    > > javascript:
    > >
    > > function changeColor(){
    > > document.all('divTest').style.backgroundColor='red';
    > > }

    >
    > document.all is a microsoft idea. it's better to have
    > document.getElementById('divTest').style.backgroundColor='red' which is
    > supported in most of the modern browsers.
    >
    > --
    > altamir
     
    John Smith, Dec 18, 2003
    #3
  4. John Smith

    Richard Guest

    altamir wrote:

    > "John Smith" <> wrote in
    > news:DPjEb.6755$:


    >> I have a DIV element containing some text. I have onmouseover and on
    >> mouseout events declared. However, the onmouseover event only fires
    >> with the mouse is over the actual text, and not the div as a whole. I
    >> have tried setting the div style to display:block, but it makes no
    >> difference. Any ideas?


    > which browser, which version?



    >> <DIV id='divTest' OnMouseOver='changeColor()'
    >> OnMouseOut='revertColor()'>
    >> Hello, this is some test text!
    >> </DIV>


    > try


    > <div onmouseover="this.style.backgroundColor='red'" ... >
    > ...
    > </div>


    Works better with just "background".
    I tested yours out and got nothing.



    >> javascript:
    >>
    >> function changeColor(){
    >> document.all('divTest').style.backgroundColor='red';
    >> }


    > document.all is a microsoft idea. it's better to have
    > document.getElementById('divTest').style.backgroundColor='red' which is
    > supported in most of the modern browsers.


    > --
    > altamir
     
    Richard, Dec 18, 2003
    #4
  5. John Smith

    altamir Guest

    "John Smith" <> wrote in news:WcnEb.6882$031.1449
    @fe3.columbus.rr.com:

    > Thanks. I'm using IE6. The example I gave actually works fine but my real
    > code doesn't, and I'm not sure what the difference is. My actual code is:
    >
    > <div id="chartmenu" class="ContextMenu" style="VISIBILITY:hidden"
    > ONMOUSEOUT="this.tid = setTimeout('chartmenuhide(event)', 900);"
    > ONMOUSEOVER="clearTimeout(this.tid);">
    > <div class="ContextMenuItem" id="ChartMenuItemAdd"
    > onMouseover="chartmenuhighlight(event)"
    > onMouseout="chartmenulowlight(event)">
    > Add to Graph
    > </div>
    > </div>


    i guess it's time to change a group to comp.lang.javascript

    --
    altamir
     
    altamir, Dec 18, 2003
    #5
  6. John Smith

    altamir Guest

    "Richard" <anonymous@127.000> wrote in news::


    >> <div onmouseover="this.style.backgroundColor='red'" ... >
    >> ...
    >> </div>


    > Works better with just "background".
    > I tested yours out and got nothing.


    maybe. depends on the browser. but as usual it's better to keep to the
    standards.

    --
    altamir
     
    altamir, Dec 18, 2003
    #6
    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. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    758
  2. Steve
    Replies:
    1
    Views:
    288
    Richard Cornford
    Apr 9, 2005
  3. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    197
    David Dorward
    Jun 1, 2005
  4. mscir
    Replies:
    3
    Views:
    321
    Martin Honnen
    Jun 26, 2005
  5. Ciuin
    Replies:
    1
    Views:
    128
    Ciuin
    Feb 5, 2007
Loading...

Share This Page