Elias Schegg: Rollover mit CSS-Rahmen

Beitrag lesen

Ich habe folgendes Problem:
Für eine Website habe ich ein menu mit Rollovern gestaltet. So weit so gut, doch jedes dieser Bilder ist in einem CSS-Rahmen drin. Dieser Rollover funktioniert zwar ohne Rahmen, doch mit wird der Rollover immer nur im ersten Rahmen angezeigt. Kann mir jemand sagen, wie ich definieren kann, in welchem Rahmen der Rollover angezeigt wird?
Ach ja, hier habe ich noch den Quellcode:
<html>

<head>
<title>SP Bezirk Weinfelden</title>
  <style type="text/css" media="screen"><!--
#Ebene1 { position: absolute; top: 0px; left: 0px; width: 100px; height: 100px; visibility: visible; display: block }
#Ebene2  { position: absolute; top: 61px; left: 10px; width: 60px; height: 23px; visibility: visible; display: block }
#Ebene3  { position: absolute; top: 61px; left: 71px; width: 97px; height: 23px; visibility: visible; display: block }
#Ebene4  { position: absolute; top: 61px; left: 172px; width: 173px; height: 23px; visibility: visible; display: block }
#Ebene5  { position: absolute; top: 61px; left: 351px; width: 99px; height: 23px; visibility: visible; display: block }
#Ebene6  { position: absolute; top: 61px; left: 455px; width: 84px; height: 23px; visibility: visible; display: block }
#Ebene7 { position: absolute; top: 59px; left: 542px; width: 60px; height: 25px; visibility: visible; display: block }
#Ebene8 { position: absolute; top: 110px; left: 4px; width: 696px; height: 385px; visibility: visible; display: block }

--></style>
  <script type="text/javascript">
<!--
Normal1 = new Image();
Normal1.src = "../grafiken/menu/home.gif";
Highlight1 = new Image();
Highlight1.src = "../grafiken/menu/home2.gif";
Normal2 = new Image();
Normal2.src = "../grafiken/menu/vorstand.gif";
Highlight2 = new Image();
Highlight2.src = "../grafiken/menu/vorstand2.gif";
Normal3 = new Image();
Normal3.src = "../grafiken/menu/amtstraeger.gif";
Highlight3 = new Image();
Highlight3.src = "../grafiken/menu/amtstraeger2.gif";
Normal4 = new Image();
Normal4.src = "../grafiken/menu/beitreten.gif";
Highlight4 = new Image();
Highlight4.src = "../grafiken/menu/beitreten2.gif";
Normal5 = new Image();
Normal5.src = "../grafiken/menu/kontakt.gif";
Highlight5 = new Image();
Highlight5.src = "../grafiken/menu/kontakt2.gif";
Normal6 = new Image();
Normal6.src = "../grafiken/menu/links.gif";
Highlight6 = new Image();
Highlight6.src = "../grafiken/menu/links2.gif";

function Bildwechsel(Bildnr,Bildobjekt) {
 window.document.images[Bildnr].src = Bildobjekt.src;
}
//-->
</script>
 </head>
 <body bgcolor="#ffffff">
  <div id="Ebene1">
   <img src="../grafiken/titelbalken.jpg" alt="" height="100" width="700" border="0"></div>
  <div id="Ebene2">
   <a onmouseover="Bildwechsel(0,Highlight1);return true"  onmouseout="Bildwechsel(0,Normal1);return true" href="home.html"><img src="../grafiken/menu/home.gif" alt="" height="23" width="60" border="0"></a></div>
  <div id="Ebene3">
   <a onmouseover="Bildwechsel(0,Highlight2);return true" onmouseout="Bildwechsel(0,Normal2);return true" href="vorstand.html"><img src="../grafiken/menu/vorstand.gif" alt="" height="23" width="97" border="0"></a></div>
  <div id="Ebene4">
   <a onmouseover="Bildwechsel(0,Highlight3);return true" onmouseout="Bildwechsel(0,Normal3);return true" href="antraeger.html"><img src="../grafiken/menu/amtstraeger.gif" alt="" height="23" width="173" border="0"></a></div>
  <div id="Ebene5">
   <a onmouseover="Bildwechsel(0,Highlight4);return true" onmouseout="Bildwechsel(0,Normal4);return true" href="beitreten.html"><img src="../grafiken/menu/beitreten.gif" alt="" height="23" width="99" border="0"></a></div>
  <div id="Ebene6">
   <a onmouseover="Bildwechsel(0,Highlight5);return true" onmouseout="Bildwechsel(0,Normal5);return true" href="kontakt.html"><img src="../grafiken/menu/kontakt.gif" alt="" height="23" width="84" border="0"></a></div>
  <div id="Ebene7">
   <a onmouseover="Bildwechsel(0,Highlight6);return true" onmouseout="Bildwechsel(0,Normal6);return true" href="links.html"><img src="../grafiken/menu/links.gif" alt="" height="25" width="60" border="0"></a></div>
  <div id="Ebene8">
</body>