/    Sign up×
Community /Pin to ProfileBookmark

Backgrounds…

Copy linkTweet thisAlerts:
Jun 23.2004

Here’s what I’m trying to accomplish…

div1 needs a bg image
div2 needs to be transparent so we see the div1 bg image
div2 also needs to display an image when a:hover is satisfied

Here’s what I tried and it only seems to work in IE…

———- HTM ———-
<body>
<div id=”div1″>
<div id=”div2″>
<a href=”link.htm” title=”Link #1″><img alt=”Blank spacer image” src=”img-blank.gif” title=”Blank spacer image” /><p>Visit the site…</p></a>
</div>
</div>

</body>
————————-

———- CSS ———-
#div1 {
background: transparent url(“img-visible.gif”) no-repeat 0% 0%;
height: 239px;
margin: 0 auto;
min-height: 239px;
min-width: 585px;
padding: 0;
text-align: center;
width: 585px;
}
#div2 {
background-color: transparent;
height: 239px;
margin: 0;
min-height: 239px;
min-width: 585px;
padding: 0;
text-align: center;
width: 585px;
}
#div2 a,
#div2 a:link,
#div2 a:visited {
background-color: transparent;
margin: 0;
padding: 0;
text-align: center;
}
#div2 a:hover {
background: transparent url(“img-hover.gif”) no-repeat 0% 0%;
margin: 0;
padding: 0;
text-align: center;

}
————————-

Am I missing something?

Thanx.

to post a comment
CSS

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangJun 23.2004 — Apart from a <p> enclosed by <a>, not valid, I see no problem.
Copy linkTweet thisAlerts:
@stmasiauthorJun 23.2004 — Sheesh!

Can't believe I missed that.

However, still only works in IE.

Any other suggestions?

Thanx.
Copy linkTweet thisAlerts:
@IncaWarriorJun 24.2004 — do you need

background-color: transparent;

??

use text-indent instead of that spacer image

I don't think IE works with the hover thing unless it's on A, there are a couple fixes for that
Copy linkTweet thisAlerts:
@FangJun 24.2004 — What exactly doesn't work?

Results in IE, Moz, FF and Opera were identical.
Copy linkTweet thisAlerts:
@stmasiauthorJun 24.2004 — In IE, things work as I would like them to.

When the page loads, I should be able to see the bg image in DIV1. When the hover state is active over DIV2, which is contained inside DIV1, the background should change from the "blank" image to the "visible" image, displayed over the bg image in DIV1.

I hope that makes sense.

Thanx.
Copy linkTweet thisAlerts:
@FangJun 24.2004 — Try it like this, you may need to change some heights/widths a little:
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;css popup&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;style type="text/css"&gt;
&lt;!--
#div1 {
background: transparent url("../Images/mainBackground.gif") no-repeat 0% 0%;
height: 320px;
margin: 0 auto;
min-height: 320px;
min-width: 800px;
padding: 0;
text-align: center;
width: 800px;
}
#div2 {
background-color: transparent;
height: 239px;
margin: 0 auto;
min-height: 320px;
min-width: 80px;
padding: 0;
text-align: center;
width: 80px;
}
#div2 a,
#div2 a:link,
#div2 a:visited {
background-color: transparent url("../Images/transparent.gif") no-repeat 0% 0%;;
margin: 0;
padding: 0;
text-align: center;
display:block;
width:80px;
height:80px;
}
#div2 a:hover {
background: transparent url("../Images/myImage.gif") no-repeat 0% 0%;
margin: 0;
padding: 0;
text-align: center;
}
--&gt;
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;div id="div1"&gt;
&lt;div id="div2"&gt;
&lt;a href="link.htm" title="Link #1"&gt;&lt;br /&gt;&lt;span&gt;Visit&amp;nbsp;the&amp;nbsp;site...&lt;/span&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Basically you are doing the same as [URL=http://www.meyerweb.com/eric/css/edge/popups/demo2.html]Pure CSS Popups 2[/URL]
Copy linkTweet thisAlerts:
@stmasiauthorJun 24.2004 — Dude...

[SIZE=12]AWESOME!!![/SIZE]

What the heck was I missing?! Was it only the [display:block]?!

Thank you so much!
Copy linkTweet thisAlerts:
@FangJun 24.2004 — My pleasure.

Check through all the changes and look at the link I gave you.
×

Success!

Help @stmasi 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 6.16,
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: @nearjob,
tipped: article
amount: 1000 SATS,

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

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...