asked on 2/28/2007

Image map & background image with text on top?

Is it possible to have an Image map & an background image with text on top?
I've tried (this lets me hotlink the background image but can't get the text on top):
td.YourSource {
      float: left;
      width:800; height:444;
      margin-top: 0;
      }
<map name="templatemap">
<area shape="rect" alt="Tape" coords="230, 25, 320, 120" href="catalog.asp" title="tape">
<area shape="rect" alt="Edge Protectors" coords="340, 9, 460, 80" href="EdgeProtectors.asp" title="edge">
<area shape="rect" alt="Bubble Wrap" coords="475, 30, 572, 102" href="BubbleWrap.asp" title="BWrap">
</map>
<td id=menuHome class="YourSource" align=left valign=top >
<img border="0" src="BoxBizHomeIMagesOnly.jpg" naturalsizeflag="8" align=left usemap="#templatemap"></img>
<b><font size=3 color=white face=Arial>  Your single source for<br> junk</font></b>

and I've tried (this lets me put the text on top, but not hotlink the background image):
td.outerHome {
      float: left;
      width:800; height:444;
      margin-top: 0;
      background: url( 'BoxBizHome.jpg' ) 0 4px no-repeat;
      }
<td id=menuHome class="outerHome" align=left valign=top >
<b> <font size=3 color=white face=Arial>  Your single source for<br> junk</font></b>

There's got to be some way to do both - please help.

Scripting Languages CSS HTML

Last Comment

JamesCssl

3/1/2007

JamesCssl

2/28/2007

There are detailed instructions for what you seem to want here:
http://alistapart.com/articles/imagemap

dcass

2/28/2007

ASKER

OK - it works a little better but not yet.
I have this:
<head>
<style type="text/css">
#book {
background: url( 'BoxBizHome.jpg' ) 0 px no-repeat;
height: 400px;
width: 800px;
}
#menu a {
position: absolute;
height: 400x;
width: 800px;
top: 0px;
text-decoration: none;
}
#menu a i { visibility: hidden; }
</style>
<style type="text/css">
a#tape { top: 25px; left: 350px; right:400px; bottom:40;}
a#edge { top:8px; left: 450px; right:490px; bottom:20; }
a#bwrap { top: 25px; left: 580px; right:620px; bottom:20; }
</style>
</head>
<p align=center style=margin-top:<%=pmt%>;margin-left:2;>
<table align=center>
<div id="book">
<div id="menu">
<a href="catalog.asp" alt=tape id="tape"><i>Tape</i></a>
<a href="EdgeProtectors.asp" alt=edge id="edge"><i>Edge Protectors</i></a>
<a href="BubbleWrap.asp" alt=bubblewrap id="bwrap"><i>Bubble Wrap</i></a>
</div>
</div>
</td></tr></table>
</p>

BUT it doesn't show the text because it's hidden and it shows only a gray box the first tenth of the image (across the top).
I'm having a lot of trouble applying this. I don't need a hover - at least not yet.

dcass

2/28/2007

ASKER

This example does not show everything that's on this page and it would never work. I viewed the source, but it's using an external css, so can't see it.
Can you finish it out?

ASKER CERTIFIED SOLUTION

JamesCssl

2/28/2007

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

dcass

2/28/2007

ASKER

I was going good on this, everything was coming together, even got the text on - then I slid the browser closed a little and realized that position:absolute will never work because when you slide the browser closed a little, the image will keep centering and the text doesn't move, so it doesn't stay together. It's designed for 800 X 600 centered. If I anchored the image to the left side, it would work, but then I'd have to redo the entire 100 page web site - what a bummer.

I'll give you the points, because I didn't specify it had to be centered.

JamesCssl

3/1/2007

This still may work. If you add a wrapper <div id="pagewrapper"> around the whole page, and apply this style to it:

#pagewrapper {
position:relative;
margin:auto;
text-align:center;
width:580px;
}

(your satisfaciton is more important to me than points, though I do appreciate them)

Image map &amp; background image with text on top?

Image map & background image with text on top?