Question about image maps Options

[weirdman]

I already have the code set and stuff, but when I set it up, the image map is supposed to be right under another image. But when I got it set up, it's about 20 or so pixels off of the spot it's supposed to be in. I have no idea how to edit image maps so that the image is over more (image, not the coords, the image). Heres the code.

<DIV ALIGN="CENTER">
<MAP NAME="options">
<AREA
HREF="http://home.myspace.com/index.cfm?fuseaction=user&MyToken=835401e1-fd60-49e2-a194-cd4af6bd1a23" TITLE="Home"
SHAPE=RECT COORDS="207,12,285,33">
<AREA
HREF="products.html" TITLE="Send Message"
SHAPE=CIRCLE COORDS="251,143,47">
<AREA
HREF="new.html" TITLE="Add to Friends"
SHAPE=POLY COORDS="150,217, 190,257, 150,297,110,257">
<AREA
HREF="new.html" TITLE="Favorite"
SHAPE=POLY COORDS="150,217, 190,257, 150,297,110,257">
</MAP>

<tab><IMG SRC="http://img81.imageshack.us/img81/143/optionsyx9.png"
BORDER=0 WIDTH=900 HEIGHT=100
USEMAP="#options"><BR>
</div>
</div>

[freeflow]

What is the rest of the layout code?

[weirdman]

About me

<style type="text/css">
body {
background-color: EAE7E7;}
table, tr, td {background-color:EAE7E7;}
table table table table, table table table table td.text, table.contactTable {display:none;}
td.text table, .orangetext15 {visibility:hidden;}
td.text table table {display:inline; visibility:visible;}
td.text td.text table {display:none;}
div b font font, div font font u {display:none;}
.whitetext12 { display: none; }
.nametext { display:none;}
table, tr, td {background-color: EAE7E7; border: 0px; padding:2;}
table table {border: 0px;}
table table table table{border: 0px;}
table table table {border: 0px solid; border-color: transparent; background-color: EAE7E7; }
</style>

I'd like to meet

<div class="bg" style="position: absolute; left: 10px; top: 80px; width:900px; height:192px; overflow: hidden;">
<img src="http://img206.imageshack.us/img206/2628/tmancopyvr2.jpg">
</div>

<div class="content" style="position: absolute; left:15px; top:250px; width:900px; height:100px; overflow: hidden;">

<DIV ALIGN="CENTER">
<MAP NAME="options">
<AREA
HREF="http://home.myspace.com/index.cfm?fuseaction=user&MyToken=835401e1-fd60-49e2-a194-cd4af6bd1a23" TITLE="Home"
SHAPE=RECT COORDS="207,12,285,33">
<AREA
HREF="sendmessage.html" TITLE="Send Message"
SHAPE=CIRCLE COORDS="251,143,47">
<AREA
HREF="add.html" TITLE="Add to Friends"
SHAPE=POLY COORDS="150,217, 190,257, 150,297,110,257">
<AREA
HREF="fav.html" TITLE="Favorite"
SHAPE=POLY COORDS="150,217, 190,257, 150,297,110,257">
</MAP>

<tab><IMG SRC="http://img81.imageshack.us/img81/143/optionsyx9.png"
BORDER=0 WIDTH=900 HEIGHT=100
USEMAP="#options"><BR>
</div>
</div>

[freeflow]

Because your image is just http://img81.imageshack.us/img81/143/optionsyx9.png
You could of just made a seperate image for each link and did it that way or you could of image sliced.

It was your image map. I don't know how you did it but yea. I remapped it. You need to add in the links.

CODE

<div class="bg" style="position: absolute; left: 10px; top: 80px; width:900px; height:192px; overflow: hidden;">
<img src="http://img206.imageshack.us/img206/2628/tmancopyvr2.jpg">
</div>

<div class="content" style="position: absolute; left:15px; top:250px; width:900px; height:100px;">
<img src="http://img81.imageshack.us/img81/143/optionsyx9.png" width="1008" height="100" border="0" alt="" usemap="#optionsyx9_Map">
<map name="optionsyx9_Map">
<area shape="rect" alt="fave" coords="695,13,794,35" href="http://link.com">
<area shape="rect" alt="friends" coords="495,13,682,36" href="http://link.com">
<area shape="rect" alt="message" coords="299,13,483,37" href="http://link.com">
<area shape="rect" alt="home" coords="213,13,282,38" href="http://link.com">
</map></div>