Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    onMouseOver & onMouseOut layered divs

    I'm trying to layer divs using "z-index"s one background div with an image and a div directly on top of that with text and links in it.

    The trick is, I want the top div with text and links to be hidden when the cursor is not over it, and to show up only when moused over.

    It seems a kind of Catch-22 to have a div that shows up when you mouseover itself, if it hides when your mouse is not over it.

    I tried putting the onMouseOver and onMouseOut code in the top div, in the bottom div, and in a third empty div on top of the other two. It doesn't work at all if it's in the div with the text and links(as I expected) and if it's in the bottom div, it kind of works, but the text in the top div flashes on and off constantly as the cursor moves around in it, which also makes links in the text pretty hard to click. If it's in a third div on top of both of the other two, it works but you can't click any links as they're under that invisible top div.

    It's something like (this example being the one with the onMouseOver & Out code in the div with text & links that I want show/hide):

    Code:
    <div id="background" style="position:absolute; top:0; left:0; width:276px; height:110px; z-index:1;"><img src="http://www.google.com/intl/en_ALL/images/logo.gif"></div>
    
    <div id="text" onMouseOver="document.getElementById('text').style.visibility = 'visible'" onMouseOut="document.getElementById('text').style.visibility = 'hidden'" style="position:absolute; top:0; left:0; width:276px; height:110px; z-index:2; visibility:hidden;">bla bla bla <a href="http://www.google.com">bla</a> bla</div>

  • #2
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    You could probably use text-indent: -5000px or something to hide the text, and then set it to 0 onmouseover. Any attempt at hiding the div will make it not catch mouse events.

    There's also the option of programatically building the content onmouseover with DOM. You could cache that HTML as innerHTML and replace it onmouseover.

  • #3
    New Coder
    Join Date
    Oct 2007
    Posts
    22
    Thanks
    0
    Thanked 4 Times in 4 Posts
    try this

    <div id="background" style="position:absolute; top:0; left:0; width:276px; height:110px;" onmouseover="document.getElementById('text').style.visibility = 'visible'" onmouseout="document.getElementById('text').style.visibility = 'hidden'"><img src="http://www.google.com/intl/en_ALL/images/logo.gif" /></div>

    <div id="text" style="position:absolute; top:0; left:0; width:276px; height:110px; visibility:hidden" onmouseover="document.getElementById('text').style.visibility = 'visible'" onmouseout="document.getElementById('text').style.visibility = 'hidden'">bla bla bla <a href="http://www.google.com">bla</a> bla</div>

  • Users who have thanked _peter_ for this post:

    sgray6 (10-09-2007)

  • #4
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks to you both!

    Peter, your idea worked great-- I guess a little repetition was all that was needed!

  • #5
    New Coder
    Join Date
    Oct 2007
    Posts
    22
    Thanks
    0
    Thanked 4 Times in 4 Posts
    you are welcome. the idea is when you are over the hrefs not to hide them

    anyway glad i could help

  • #6
    New Coder
    Join Date
    Sep 2007
    Posts
    24
    Thanks
    4
    Thanked 1 Time in 1 Post
    Quote Originally Posted by vtjustinb View Post
    Any attempt at hiding the div will make it not catch mouse events.
    This is not necessarily the case. You can use the javascript to modify the opacity css property, and make an object completely invisible, but it will still catch the onmouseover, and onmouseout triggers. You can read more about it here.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •