/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Transparent div overlay with title ???

Copy linkTweet thisAlerts:
Feb 09.2012

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?

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@rtretheweyFeb 10.2012 — 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.
<i>
</i>&lt;div class="overlayWrapper" onmouseover="visible();" onmouseout="invisible();"&gt;
&lt;div id="yourOriginalDIV"&gt;...&lt;/div&gt;
&lt;div class="overlayDIV"&gt;...&lt;/div&gt;
&lt;/div&gt;
Copy linkTweet thisAlerts:
@alannauthorFeb 10.2012 — 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.
×

Success!

Help @alann spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.8,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...