Nachtrag Lösung CSS-Image-Hover

[Nicola Straub]

Ich war leider durch Krankheit vorübergehend ausgefallen (was auch die Löcher im Hirn vorletzte Woche erklärt), hier der Lösungsnachtrag:

Aufgabe: Hover-Bild bei Mouseover für verschiedene Linkbilder.

Mein Ansatz: Transparentes Linkbild, unterschiedliche Bilder in Hintergrund und bei Hover.

Mein Problem: Es ueberhaupt hinzukriegen und  unschön viele IDs im CSS.

Vorschlaege: Ueber IDs oder bei gleichem Hoverbild mit unterschiedlichen Bildern im IMG und ausblenden ueber Visibility.

Meine Loesung: Ich hab nun den Vorschlag von Ingo umgesetzt, weil ich mit einem einheitlichen 'Hover-Bild' auskomme. Ich brauche so auch nicht mit diversen IDs zu jonglieren.

Code:

CSS:
#download {
 float:right;
         width:70px;
         padding:5px;
         font-family:Helvetica,Arial,sans-serif;
         font-size:1em;
         text-align:center;
         color:black;
}

#download img {
        width:69px;
        height:98px;
        border:0px solid blue;
        display:block;
        padding-left:0;
            }

#download a {
         background-image:url(images/pdf.gif);
         background-repeat:no-repeat;
         width:69px;
         height:98px;
            }

#download a:hover {
         background-image:url(images/load.gif);
         background-repeat:no-repeat;
         width:69px;
         height:98px;
         display:block;
         padding-left:0;
         font-size:0.1em;              }

.pdfdownload {
 background:url(images/load.gif);
         width:69px;
         height:98px;
         margin-bottom:20px;
         display:block;
         }

.pdfdownload:hover img {
 visibility:hidden;
         display:block;
         }

Und dann:

<div id="download"><a class="pdfdownload" href="pdf.pdf"><img src="images/pdf.gif" width="69" height="98" alt="Download Verzeichnis der Ferienwohnungen &amp; -häuser" /></a><a class="pdfdownload" href="pdf.pdf"><img src="images/pdf2.gif" width="69" height="98" alt="Download Verzeichnis der Ferienwohnungen &amp; -häuser" /></a><a class="pdfdownload" href="pdf.pdf"><img src="images/pdf3.gif" width="69" height="98" alt="Download Verzeichnis der Ferienwohnungen &amp; -häuser" /></a></div>

Ich habe noch versucht, ohne die 'a'-Bereiche von #download auszukommen, weil ich die wichtigen Definitionen ja in .pdfdownload setze. Ulkigerweise treten dann aber seltsame Effekte auf (Rahmen, Umherspringen der Bilder etc.), was ich bisher nicht weiter eingegrenzt bekam. Wie aufgefuehrt klappt es aber (mit IE 6 und Mozilla) ganz prima.

http://physalia.de/tmp/kylltal.html

Herzliche Gruesse und verspaeteten Dank fuer Eure Hilfe!

Nicola