nicht angemeldet
sowas hab ich schonmal gemacht...
hier mal der source und das CSS und das Image:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN">
<HTML>
<HEAD>
<TITLE>www.frima.name</TITLE>
<META NAME="Author" CONTENT="Markus Hilker">
</HEAD>
<link rel="stylesheet" href="index.css">
<BODY>
<table>
<tr>
<td class="topbg">
<table style="border: 1px solid black; width: 800px; height:260px;">
<tr>
<td style="width: 199px;">
<div style="border: 1px solid black; width:100px; height:80px; padding-top: 20px; text-align: center; font-family: Verdana, Tahoma, Arial; font-size:20px;">LOGO Here!</div>
</td>
<td style="padding-top: 15px;">
<map name="Landkarte">
<area shape="circle" coords="5,47,10" href="#"
onmouseover="document.getElementById('box1').style.visibility = 'visible';"
onmouseout="document.getElementById('box1').style.visibility = 'hidden';">
<area shape="circle" coords="16,93,10" href="#"
onmouseover="document.getElementById('box2').style.visibility = 'visible';"
onmouseout="document.getElementById('box2').style.visibility = 'hidden';">
<area shape="circle" coords="35,144,10" href="#"
onmouseover="document.getElementById('box3').style.visibility = 'visible';"
onmouseout="document.getElementById('box3').style.visibility = 'hidden';">
<area shape="circle" coords="57,171,10" href="#"
onmouseover="document.getElementById('box4').style.visibility = 'visible';"
onmouseout="document.getElementById('box4').style.visibility = 'hidden';">
<area shape="circle" coords="207,157,10" href="#"
onmouseover="document.getElementById('box5').style.visibility = 'visible';"
onmouseout="document.getElementById('box5').style.visibility = 'hidden';">
<area shape="circle" coords="275,105,10" href="#"
onmouseover="document.getElementById('box6').style.visibility = 'visible';"
onmouseout="document.getElementById('box6').style.visibility = 'hidden';">
<area shape="circle" coords="349,197,10" href="#"
onmouseover="document.getElementById('box7').style.visibility = 'visible';"
onmouseout="document.getElementById('box7').style.visibility = 'hidden';">
<area shape="circle" coords="349,110,10" href="#"
onmouseover="document.getElementById('box8').style.visibility = 'visible';"
onmouseout="document.getElementById('box8').style.visibility = 'hidden';">
<area shape="circle" coords="359,42,10" href="#"
onmouseover="document.getElementById('box9').style.visibility = 'visible';"
onmouseout="document.getElementById('box9').style.visibility = 'hidden';">
<area shape="circle" coords="215,49,10" href="#"
onmouseover="document.getElementById('box10').style.visibility = 'visible';"
onmouseout="document.getElementById('box10').style.visibility = 'hidden';">
</map>
<div class="hiddenfield" style="background-color: #fdc427; color: #202020; position: absolute; top:47px; left:205px; visibility: hidden;" id="box1">
Link1
</div>
<div class="hiddenfield" style="background-color: #f9b024; color: #202020; position: absolute; top:93px; left:216px; visibility: hidden;" id="box2">
Link2
</div>
<div class="hiddenfield" style="background-color: #f69b20; color: #202020; position: absolute; top:144px; left:235px; visibility: hidden;" id="box3">
Link3
</div>
<div class="hiddenfield" style="background-color: #f2861c; color: #000000; position: absolute; top:171px; left:257px; visibility: hidden;" id="box4">
Link4
</div>
<div class="hiddenfield" style="background-color: #ee7119; color: #000000; position: absolute; top:157px; left:407px; visibility: hidden;" id="box5">
Link5
</div>
<div class="hiddenfield" style="background-color: #ea5c15; color: #cfcfcf; position: absolute; top:105px; left:475px; visibility: hidden;" id="box6">
Link6
</div>
<div class="hiddenfield" style="background-color: #e74711; color: #dfdfdf; position: absolute; top:197px; left:549px; visibility: hidden;" id="box7">
Link7
</div>
<div class="hiddenfield" style="background-color: #e3320e; color: #dfdfdf; position: absolute; top:110px; left:549px; visibility: hidden;" id="box8">
Link8
</div>
<div class="hiddenfield" style="background-color: #df1d0a; color: #efefef; position: absolute; top:42px; left:559px; visibility: hidden;" id="box9">
Link9
</div>
<div class="hiddenfield" style="background-color: #db0806; color: #efefef; position: absolute; top:49px; left:415px; visibility: hidden;" id="box10">
Link10
</div>
<img src="Image11.png" usemap="#Landkarte" style="border: 0px;">
</td>
<td style="vertical-align: bottom;">
<div id="bild1">
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table>
<tr>
<td id="zeile" colspan="2" style="background-color: #a3a0ab; width: 800px;">
<div id="statusline">content</div>
</td>
</tr>
<tr style="height: 400px;">
<td id="spalte" style="background-color: #a3a0ab; width:199px; border-top: 1px solid black; border-right: 1px solid black;">
content
</td>
<td id = "content" style="background-color: #efefef; border-top: 1px solid black; border-right: 1px solid black; padding: 3px;">
content
</td>
</tr>
</table>
</BODY>
</HTML>
CSS
body {
background-color: #efefef;
margin: auto;
}
table {
width:800px;
border: 0px;
border-collapse: collapse;
padding: 0px;
}
td.topbg {
background-image: url(header.jpg);
width:800px;
height: 260px;
vertical-align: top;
}
td {
padding: 0px;
vertical-align: top;
font-family: Verdana, Tahoma, Arial;
font-size: 11px;
}
.hiddenfield
{
margin: 0px;
font-family: Microsoft Sans Serif;
font-size: 11px;
border: 1px solid black;
padding: 2px;
z-index: 2;
}
http://pixlomat.com/Image11.png
http://pixlomat.com/header.jpg
vielleicht hilft's ja?!