Elias Schegg: Rollover mit CSS-Rahmen

SELF-Forum

Rollover mit CSS-Rahmen

Elias Schegg
– Informationen zu den Bewertungsregeln

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>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Rollover mit CSS-Rahmen

    David Tibbe Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo

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

    Du hast in jedem Link Bildwechsel(0, Bla) aufgerufen. Also wird auch immer nur das Bild mit dem Index 0 verändert. Nummeriere sie fortlaufend und du kannst dich freuen...
    Hättest du richtig gelesen und nicht nr kopiert wärest du auch selbst drauf gekommen...
    http://selfhtml.teamone.de/javascript/beispiele/buttons.htm

    Grüße

    David

    --
    "Nobody will ever need more than 640k RAM!"
    1981 Bill Gates
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln