Link to home
Start Free TrialLog in
Avatar of dcass
dcassFlag for United States of America

asked on

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>&nbsp; Your single source for<br>&nbsp;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>&nbsp; Your single source for<br>&nbsp;junk</font></b>


There's got to be some way to do both - please help.
Avatar of JamesCssl
JamesCssl
Flag of United States of America image

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

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.
Avatar of dcass

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
Avatar of JamesCssl
JamesCssl
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of dcass

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.
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)