Diesen Effekt sieht man im Internet häufig bei Menü- oder Navigationsleisten. Ein Image ändert sich – zum Beispiel die Schrift – wenn man mit der Maus darüber fährt. Der Effekt ist eigentlich einfach, denn anhand eines MouseOver-Ereignisses muss lediglich das Image ausgetauscht werden. Dies bedeutet, dass wir auf jeden Fall zwei Images benötigen.
Bisher hat man sich bei diesem Effekt meist auf JavaScript eingelassen. Der MouseOver-Effekt wurde per JavaScript abgefangen und das Image getauscht. Heute möchten wir den Effekt ausschließlich per CSS realisieren, denn der Effekt soll auch funktionieren, wenn Benutzer JavaScript deaktiviert haben. Ferner soll der Link, der hinter dem Image steckt, auch bei mobilen Browsern funktionieren, die kein CSS können. Aber gleich vorneweg: Der CSS-Effekt, den wir heute hier beschreiben, funktioniert bei allen aktuellen mobilen Geräten, mit denen ich ihn testen konnte.
Im vorliegenden Fall benötigen wir mehrere Images auf einer Seite, die zu speziellen Informationsseiten linken sollen. Diese Boxen sollen auffallen, aber eben nicht auffallen. Schwierig? Der Gedanke bei diesen Informationsboxen ist, dass sie ihrer Farbe beraubt werden und erst bei einem überfahren mit der Maus (MouseOver) ihre eigentliche Brillanz erhalten sollen. Dadurch, dass die Images „verwischt“ sind, fallen sie nicht sofort ins Auge und stören das eigentliche Layout nicht. Auf den zweiten Blick fallen jedoch die Images eben durch die zurückgenommene Brillanz auf und sollen neugierig machen.
Verblasstes Images mittels Gimp erstellen
Wir erstellen zuerst das fertige Image. In diesem Fall benötigen wir ein Image mit abgerundeten Kanten. Das fertige Image wird verblasst. Wie wir diesen Effekt am besten realisieren, ist im Artikel „Gimp: Bild verblassen lassen“ beschrieben. Wir benötigen also zum Schluss von jedem Image zwei Versionen. Das „strahlende“ und das „verblasste“ Image.
Image-Wechsel mit CSS umsetzen
Dem Image-Wechsel möchten wir mit CSS umsetzen. Hierzu fügen wir einen Link sowie einen Span-Container im Body an der gewünschten Stelle ein. Sollte CSS nicht funktionieren, wird der Text innerhalb der Span-Tags angezeigt. Der Link als solches wird immer funktionieren.
<a href=“http://www.mein-ziel.de“><span>Linktext</span></a>
Als nächstes benötigen wir einen CSS-Bereich. Für jedes Image benötigen wir eine eigene Klasse (was der einzige Nachteil dieser Variante ist). Wir blenden als erstes den Span-Tag aus und weisen dem dazugehörigen Link das Image als Background-Image zu.
Im Mouse-Over-Fall („hover“: wir fangen auch „Active“ und „Focus“ ab) wechseln wir das Image aus.
Wir weisen also dem Link im „Normalfall“ das helle, im Hover- bzw. MouseOver-Fall das farbintensive Bild zu:
<html>
<head>
<TITLE>Image Wechsel bei Mouseover</TITLE>
<style type="text/css">
/* WechselImage 1 */
.wechselimg1 span {
display: none;
}
.wechselimg1:link, .wechselimg1:visited {
display: block;
width: 239px;
height: 58px;
background: url(kaffeetraeume_hell.png);
}
.wechselimg1:hover, .wechselimg1:active, .wechselimg1:focus {
background-image: url(kaffeetraeume.png);
}
/* WechselImage 2 */
.wechselimg2 span {
display: none;
}
.wechselimg2:link, .wechselimg2:visited {
display: block;
width: 239px;
height: 58px;
background: url(fernseher_hell.png);
}
.wechselimg2:hover, .wechselimg2:active, .wechselimg2:focus {
background-image: url(fernseher.png);
}
/* WechselImage 3 */
.wechselimg3 span {
display: none;
}
.wechselimg3:link, .wechselimg3:visited {
display: block;
width: 239px;
height: 58px;
background: url(rasur_hell.png);
}
.wechselimg3:hover, .wechselimg3:active, .wechselimg3:focus {
background-image: url(rasur.png);
}
</style>
</head>
<body>
<H1>Image Wechsel bei Mouseover</H1>
<a href="http://www.zieldomain.de" class="wechselimg1"><span>Kaffee</span></a>
<a href="http://www.zieldomain.de" class="wechselimg2"><span>TV</span></a>
<a href="http://www.zieldomain.de" class="wechselimg3"><span>Rasur</span></a>
</body>
</html>