Mouse-Effekt mit CSS
    
WWW.WEB-TOOLBOX.NET
QuellCode ZURÜCK SITEMAP  

 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).







NACH OBEN