[RESOLVED] Transparent div overlay with title ???

[alann]

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?

[rtrethewey]

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.

<div class="overlayWrapper" onmouseover="visible();" onmouseout="invisible();">
<div id="yourOriginalDIV">...</div>
<div class="overlayDIV">...</div>
</div>

[alann]

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.