Simpler Austausch von einem Bild via reinem CSS

[Elya]

Hallo Patrick,

Ich habe 2 Bilder. Das eine Bild lautet home1.jpg, und das zweite home2.jpg. Während der User mit dem Mauszeiger über das Bild home1.jpg geht möchte ich das via CSS das Bild home2.jpg anstelle von home1.jpg eingeblendet wird. Alle Daten wie das HTML Dokument, die CSS und die Bilder liegen übrigens im selben Ordner.

<p>
<a href="http://www.newgrounds.com">
<img src="home1.jpg" alt="home" width="100" height="100"
        class="img">
</a>
</p>

Solange Dein Bild im HTML steht, kannst du mit CSS-Hovereffekten nichts machen. Definiere das Bild als Hintergrundbild für Dein a-Element. Evtl. ist es dafür nötig, das  a-Element als Blockelement auszuzeichnen und mit etwas Innenabstand zu versorgen.

Für den Hover-Effekt nutzt Du dann ganz normal die Pseudoklasse a:hover, der Du ein anderes Hintergrundbild zuweisen kannst.

Als Trick würde ich übrigens empfehlen, nicht 2 Bilder zu verwenden, sondern nur eins, das beide Zustände enthält (versetzt), und auf a:hover nur die Position des Bildes zu verändern. Dann hast Du beim hovern keine Ladeverzögerung (das zweite Bild muß ja geladen werden).

Gruß aus Köln-Ehrenfeld,

Elya