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.
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.
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.
Generell wird das Startbild angezeigt (Ampel aus). Sobald man den Teilbereich (Ampel Grün) betritt wird das hover-Bild (Ampel-Rot, Gelb, Grün) angezeigt. Dieses Bild wird aber nur in dem definierten Teilbereich dargestellt. (Ampel-Gruen:hover)
In den Styling-Angaben habe ich für den Teilbereich angegeben, dass der Bereich 266px unterhalb der Oberkante der Ampel beginnt und 133px hoch ist (das ist das untere Drittel der Ampel). In diesem Bereich findet auch der Bilderwechsel statt, deshalb muss das Bild auf diesen Bereich verschoben werden.
Würde ich das Bild nicht verschieben so würde der obere Bereich – die Farbe Rot erscheinen. Das Bild muss also so verschoben werden, dass die Farbe Grün an der richtigen Stelle ist.
Dazu muss das Bild negativ verschoben werden: -266px.
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:
- Adventskalender-Blog (einfacher Hover im Kalendertürchen)
Hilfreiche Links:
Noch kein Kommentar, Füge deine Stimme unten hinzu!