Hovereffekte 2nd Edition
von Thomas Salvador.
Im Artikel "Der Hover Effekt" wurde dieser Effekt vorgestellt und erläutert, wie man ihn implementiert und welchen Sinn und Zweck er hat. Hier seien nun einige Alternativen zu dem nun doch etwas abgegriffenen Hover Effekt der Farbänderung vorgestellt. Bevor ich zu diesen komme, möchte ich jedoch darauf hinweisen, daß sie sich nicht alle immer und überall eignen. Deshalb wird oft die Farbänderung das Non-Plus-Ultra bleiben, der aus diesem Grunde hier mit aufgeführt wird.
Farbänderung
Das ist sozusagen der Standard Hover Effekt. Beim OnMouseOver ändert der Link seine Farbe.
|
<style type="text/css"><!-- a:hover {color: #farbe} //--> </style> |
 |  |
| Die syntaktische Form | Ein Beispiel | Hover in Aktion |
Hintergrund
Auffälliges Feedback gibt dieser Hover Effekt, der beim OnMouseOver den Link mit einer Hintergrundfarbe hinterlegt. Idealer Einsatz in entsprechend aufbereiteten Tabellen, bei entsprechender Farbgebung aber auch so.
|
<style type="text/css"><!-- a:hover {background: #farbe} //--> </style> |
 |  |
| Die syntaktische Form | Ein Beispiel | Hover in Aktion |
Hintergrund 2
Wie Hintergrund, jedoch wird beim OnMouseOver zusätzlich die Unterstreichung entfernt, die man in dem Moment nicht mehr benötigt.
|
<style type="text/css"><!-- a:hover {background: #farbe; text-decoration: none} //--> </style> |
 |  |
| Die syntaktische Form | Ein Beispiel | Hover Only! |
Weight
Hübsch ist dieser Hover Effekt, der beim OnMouseOver, den Text auf fett stellt. Ideal mit Gleichweitenschrift oder in Tabellen. Unmöglich mit Proportionalschrift im Fließtext.
|
<style type="text/css"><!-- a:hover {font-weight: bold} //--> </style> |
 |  |
| Die syntaktische Form | Ein Beispiel | Hover in Aktion |
Size
Beim OnMouseOver wird hier der Text größer. Theoretisch nur in entsprechend aufbereitetet Tabellen einsetzbar.
|
<style type="text/css"><!-- a:hover {font-size: 110%;} //--> </style> |
 |  |
| Die syntaktische Form | Ein Beispiel | Hover in Aktion |
Size und Weight
Die Kombination der letzten beiden ist sehr schön in Tabellen machbar.
|
<style type="text/css"><!-- a:hover {font-size: 110% font-weight: bold;} //--> </style> |
|  |
| Die syntaktische Form | Ein Beispiel | Hover in Aktion |
Der erste Artikel brachte bereits eine Erläuterung zu Sinn und Zweck des Hover Effektes.
Verwandte Artikel und Seiten
- Der Hover Effekt
- CSS Artikel
- Der MouseOver-Effekt
Diese Site anlinken. Artikel zu CSS | HTML | JavaScript | Perl | Usability | Sonst. | nach Ausgabe.
Copyright © 1999-2010 Thomas Salvador und brauchbar.de . Alle Rechte vorbehalten. Gehostet bei 1 und 1.
Reproduktion, ganz oder in Teilen, nur mit schriftlicher Zustimmung von Thomas Salvador. Impressum · Datenschutzerklärung · Kontakt.
Hat Ihnen diese Seite gefallen oder geholfen? Geben Sie mir einen Kaffee aus (Kaffeekasse)! Danke.
Linken Sie bitte zu der festen Adresse http://www.brauchbar.de/wd/artikel/20.html .