Bildwechsel

Hier erkläre ich euch mal wie man ganz schnell und einfach einen Bildwechsel (beim Maus Hover) inklusive Verlinkung via css realisieren kann. Ich benutze das beispielsweise gerne bei dem "Erdbeerkirsch" Schriftzug.

Schriftzug

Um das ganze zu realisieren benötigt ihr zunächst einmal zwei gleich große Bilder. In diesem Fall also einmal den helleren, einmal den dunkleren Schriftzug. Das einzig schwierige ist nun, dass ihr beide Bilder in einem Bild unterbringen müsst, und zwar genau so, dass sie exakt untereinander stehen.

Habt ihr das fertig müsst ihr nur noch den Coding-Teil absolvieren. Dazu müsst ihr folgenden Code in euren CSS-Bereich einfügen.

Was hierbei ganz wichtig zu beachteten und individuell zu bearbeiten ist, ist folgendes:
- bsp-schriftzug: das ist die ID des Bildes, sie ist ganz wichtig
- width und height: die Weite ist die des Bildes, die Höhe ist allerdings nur die Hälfte der eigentlichen Höhe
- -81px: ist nochmal die Hälfte der Höhe des Bildes, allerdings im negativen Bereich
- Bildurl: hier setzt ihr natürlich eure Bildurl ein

Habt ihr das erledigt, müsst ihr nur noch folgenden Code an die Stelle setzen, wo ihr euer Bild haben möchtet. Wichtig dabei ist wieder die ID des Bildes.