www.webdeveloper.com
Results 1 to 3 of 3

Thread: [RESOLVED] Transparent div overlay with title ???

  1. #1
    Join Date
    Aug 2011
    Posts
    18

    resolved [RESOLVED] Transparent div overlay with title ???

    Guys,

    I am trying to figure out the best solution to create a transparent overlay and add a title from a name or title attribute. The idea is that when the person hovers over the div, the JS will produce a highlighted transparent color over top of the div in question. While doing this it will also display either the name or title attribute of the div in question inside of heading tags. Any ideas?

  2. #2
    Join Date
    Mar 2011
    Posts
    1,137
    I'd nest the original <div> in a wrapper <div>, setting each to position:relative; and a z-index of 1. Then nest a second <div> in the wrapper for your overlay, set to position:absolute with a z-index of 2. Then a mouseover attribute on the wrapper would toggle the style.visibility on the overlay <div>. It's up to you what appears in the overlay, but you could pull a title attribute with JavaScript.
    Code:
    <div class="overlayWrapper" onmouseover="visible();" onmouseout="invisible();">
    <div id="yourOriginalDIV">...</div>
    <div class="overlayDIV">...</div>
    </div>
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Aug 2011
    Posts
    18
    Well there will be multiple instances that this will have to be called. Basically there are two types of dynamic containers that are used. One is simple to change and the other in more involved to change. This is going to be used for reference on a test server. What you have said does seem simple enough. I will have to try this out.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles