dcass
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"></im g>
<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.
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.
<b><font size=3 color=white face=Arial> Your single source for<br> junk</font></
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></
There's got to be some way to do both - please help.
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-lef t: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.
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%>;
<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.
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?
Can you finish it out?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
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)
#pagewrapper {
position:relative;
margin:auto;
text-align:center;
width:580px;
}
(your satisfaciton is more important to me than points, though I do appreciate them)
http://alistapart.com/articles/imagemap