Der dreifache Hover

Kategorie: WordPress-Tipps | Share: funkygog       

Gesucht wurde eine Methode ein Bild mit einem dreifachen Hover-Effekt zu versehen.
Bei diesem Bild (Ampel) soll sich beim drüberfahren mit der Maus die Farbe der Kreise (Ampelsignale) ändern.
Hier einige Beispiele vom einfachen Hover bis zum dreifachen Hover und die erforderlichen css-Angaben.


Die Beispiele erscheinen als einzelne Seiten (html-Datei + css-Datei) somit lässt sich leichter der Quellcode einsehen. (rechte Maustaste: Seitenquelltext anzeigen)

Intro: Der Hover-Effekt

Die einfachste Form des Hover Effekts ist vermutlich ein Link.
Geht man mit der Maus auf den Link, so ändert sich die Farbe.
Beispiel: Link (Die Farbe ändert sich von blau zu rot.)
Die Styling-Angaben dazu:
a {color: blue;}
a:hover {color: red;}

Der einfache Hover

So ein Hover-Effekt lässt sich auch leicht für Bilder verwenden.
Dazu benötigt man zwei unterschiedliche Bilder gleicher Größe und steuert in den Styling-Angaben wann welches Bild erscheint.
Startbild:
Ampel Aus
Hover-Bild:
Ampel auf Rot

Ergebnis (html-Datei) und die Styling-Angaben (css-Datei)

Der einfache Hover für einen Teilbereich

Während bei dem vorherigen Beispiel der Bilderwechsel bei dem kompletten Bild wirksam wird, so lässt sich ein Wechsel auch in einem Teilbereich des Bildes erreichen.
Der Bildwechsel soll z. B. erfolgen sobald der Rot-Bereich mit der Maus überfahren wird:
Dieser Effekt ist etwas aufwendiger von den Styling-Angaben, da das Ampel-Bild unterteilt werden muss.
Hierzu wird in der css-Datei eine Größenangabe des Bereiches erforderlich. Dieser Bereich wird verlinkt und erzeugt einen Bildwechsel.

Ergebnis (html-Datei) und die Styling-Angaben (css-Datei)

Der dreifache Hover

Ein Bild lässt sich in beliebig viele Teilbereiche aufteilen. Ich habe die Ampel in drei Bereiche (Farben Rot, Gelb, Grün) unterteilt und somit lässt sich jedes Ampelsignal einzeln schalten.
Startbild:
Ampel Aus
Hover-Bild:
Ampel bunt

Hier die Umsetzung mit zwei Bildern.

Ergebnis (html-Datei) und die Styling-Angaben (css-Datei)

Wer sich dieses Beispiel genau anguckt hat, wird vielleicht bemerkt haben, dass sich beim überfahren mit der Maus (hovern) das Bild verruscht erscheint. Warum?
Für den dreifachen-Hover müssen die Bilder unbedingt die gleiche Größe haben. Das hover-Bild (bunte Ampelsignale) hat eine leicht abweichende Größe und verspringt somit.
Die Styling-Angaben verstehen: anzeigen

Für komplizierte Anwendungsfälle kann es sinnvoll sein für jedes Ampelsignal ein eigenes Bild zu verwenden.
Hier die Umsetzung mit vier Bildern:

Ergebnis (html-Datei) und die Styling-Angaben (css-Datei)

Der beste und eleganteste Weg ist die Bilder als eine Bild zusammenzuügen.
Stichwort: css-Spirtes

Anwendungsbeispiele aus der Praxis:

Hilfreiche Links:




Einen Kommentar hinterlassen

*=erforderliche Angaben

Innerhalb der Kategorie: WordPress-Tipps