Enrico: Rollover-Effekt funktioniert nicht / so überhaupt möglich?

Beitrag lesen

Hallo ChrisB,

ok, hast recht und soll nicht mehr vorkommen.

Also: Online-Beispiel, Bitte.

Ich habe noch keinen webspace, sorry, hier wären die einzelnen Dateien.

Hintergrundgrafik Homepage: http://img714.imageshack.us/img714/3597/tafel.png
Grafischer Link:            http://img839.imageshack.us/img839/2526/textlinkneuigkeiten.png
Ausgangspunkt:              http://img245.imageshack.us/img245/1403/inaktivesmenu.png
Ein aktiver Link:           http://img706.imageshack.us/img706/5660/aktivesmenu1.png
Ein weiter aktiver Link:    http://img697.imageshack.us/img697/1028/aktivesmenu2.png

Die Dateien "tafel.png" und "textlinkneuigkeiten.png" müsstest Du dann "lediglich" in's gleiche Verzeichnis abspeichern, wie die Datei "index.html", die Du aber rauskopieren und extra abspeichern müsstest, die konnte ich nicht hochladen.

Müsstest nur darauf achten, die Datei "Textlink_Neuigkeiten.png" auch unter diesem Namen abzuspeichern, da imageshack den Namen verkrüppelt hat.

Tut mir leid für die Umstände, ehrlich...

Hier die komplette index.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <style type="text/css">
         <!--
            html,
            body
            {
               font-weight:       bold;
               font-family:       Arial;
               font-size:         14px;
               color:             white;
               margin:            0;
               padding:           0;
               width:             100%;
               height:            100%;
               overflow:          hidden;
               // background-image:  url(Tafel_Schreibflaeche.png);
               // background-repeat: repeat;
            }

img
            {
               border:0px;
               padding:0px 0px 0px 0px;
               margin:0px 0px 0px 0px;
            }

div.Tafel
            {
               position:          absolute;
               height:            600px;
               width:             800px;
               margin:            -300px 0px 0px -400px;
               top:               50%;
               left:              50%;
               background-image:  url(Tafel.png);
               background-repeat: no-repeat;
            }

div.Container_Menuepunkt_Neuigkeiten
            {
               position: absolute;
               bottom:   10px;
               left:     10px;
            }

ul.Menuepunkt_Neuigkeiten
            {
               width:   112px;
               height:  43px;
               margin:  0;
               padding: 0;
            }

ul.Menuepunkt_Neuigkeiten li
            {
               float:   left;
               margin:  0;
               padding: 0;
            }

ul.Menuepunkt_Neuigkeiten li a
            {
               display:    block;
               background: 0 0 no-repeat;
               width:      112px;
               height:     128px;
               margin:     0;
               padding:    0;
            }

ul.Menuepunkt_Neuigkeiten li a.Textlink_Neuigkeiten
            {
               background-image: url(Textlink_Neuigkeiten.png);
            }

ul.Menuepunkt_Neuigkeiten li a.Textlink_Neuigkeiten:hover
            {
               background-position: 0 -43px;
            }
         //-->
      </style>
   </head>
   <body>
      <div class="Tafel">
         <div class="Container_Menuepunkt_Neuigkeiten">
            <ul class="Menuepunkt_Neuigkeiten">
               <li>
                  <a class="Textlink_Neuigkeiten" href="#"></a>
               </li>
            </ul>
         </div>
      </div>
   </body>
</html>

Gruß
Enrico