MouseOver-Effekt mit CSS
Bei dieser Demonstration habe ich ein wenig übertrieben! Die Positionsverschiebungen müssen ja nicht unbedingt so verwirrend sein. Ich hoffe sie bekommen keine Gleichgewichtsstörungen.
1) bewegen sie den Mauszeiger über das Image,
2) clicken sie das Image an (Mousebutton festhalten)
3) lassen sie den Mausbutton los,
4) bewegen sie den Mauszeiger vom Image weg.
funktioniert nicht im NS4.x (macht aber auch nichts 'kaputt')
Erklärung
Für 4 verschiedene Maus-Aktionen (Zustände) werden die Maße für Ränder für das betreffende Image unterschiedlich festgelegt. Tritt eine Zustandsänderung ein, rückt das Image um die Differenz der Angaben vom Ort der vorherigen Anzeige weg.
Hier 'arbeitet' die CSS-Anweisung für Ränder (border) von Images.
Bedingung: Da die Randfarbe mit der Hintergrundfarbe übereinstimmt, ist der Rand nicht erkennbar (Hintergrundfarbe = #FFEEB0).
Angaben (in Pixel) für:
border-top: Xpx solid #FFEEB0;
border-bottom: Xpx solid #FFEEB0;
border-left: Xpx solid #FFEEB0;
border-right: Xpx solid #FFEEB0;
werden jeweils unterschiedlich festgelegt für die 4 Zustände:
- onmouseover
- onmousedown
- onmouseup
- onmouseout
Aufwand
4 CSS-Klassen im Head (einmal festlegen)
4 Eventhandler in jedem Image-Tag (in jedem Image)
Beispiel für die insgesamt 4 x 4 Anweisungen:
border-top: 5px solid #FFEEB0;
Zur Anpassung folgende Änderungen in der CSS-Datei:
| Element |
hier im Beispiel |
ersetzen mit |
| Hintergrundfarbe |
solid #FFEEB0 |
HTML-Farbwert |
| border-top: Randbreite |
Xpx |
Wert in Pixel |
| border-bottom: Randbreite |
Xpx |
Wert in Pixel |
| border-left: Randbreite |
Xpx |
Wert in Pixel |
| border-right: Randbreite |
Xpx |
Wert in Pixel |
|
Entnehmen sie den volständigen Quellcode der Textdatei (Link im Kopfbereich).
|