Mouse-Effekt mit CSS
    
 Home • CSS • Mouse-Effekt QuellCode

 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.
4-Status-Button


1) bewegen Sie den Mauszeiger über das Image,
2) clicken Se 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-Events (Ereignisse) werden die Maße für Ränder für das betreffende Image unterschiedlich festgelegt. Tritt eine Zustandsänderung ein, rückt die Grafik um die Differenz der Angaben vom Ort der vorherigen Anzeige weg.

Hier 'arbeitet' die CSS-Anweisung für Ränder (border) von Images. Für die Grafik habe ich Ränder festgelegt. Da die Randfarbe mit der Hintergrundfarbe übereinstimmt, ist der Rand nicht erkennbar (Hintergrundfarbe = #FFEEB0).

Ich nutze die Möglichkeit, die Ränder an den 4 Seiten unterschiedlich breit zu bestimmen. Wird z.B. der Rand links für den Zustand MouseOver schmaler festgelegt als im 'Ruhezustand', hat es den Anschein, als würde die Grafik sich bei MouseOver nach links bewegen.

Angaben für die Randbreite aller 4 Seiten mit 4 separaten Codezeilen: 
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
Angaben für die Randbreite aller 4 Seiten in einer Codezeile: 
<style type="text/css">
<!--

.zustand00 /*Ruhezustand */
{
border-top:    3px solid #000000;
border-bottom: 3px solid #000000;
border-left:   3px solid #000000;
border-right:  3px solid #000000;
}

.zustand01
{
border-top:    6px solid #DF0000;
border-bottom: 3px solid #DF0000;
border-left:   3px solid #DF0000;
border-right:  3px solid #DF0000;
}

-->
</style>
Im <img>-Tag werden für die MouseEvents dann die CSS-Klassen eingetragen:

<img class="zustand00" onMouseover="this.className='zustand01'" src="close.gif" ... >
Die Grafik hat die CSS-Klasse zustand00, womit die Randbreiten im Ruhezustand feststehen. In der Codezeile zur Einbindung (oben) ist lediglich die Anweisung für den MouseEvent bei onMouseover zu sehen. Eine Anweisung für onMouseout gibt es natürlich auch.

Für eine anschauliche Demo wurde die Randfarbe nicht im Farbton der Seiten-Hintergrundfarbe festgelegt, was normalerweise ja üblich wäre.



   Aufwand

4 CSS-Klassen im Head (einmal festlegen)
4 Eventhandler in jedem Image-Tag (in jedem Image)


Entnehmen Sie den vollständigen Quellcode der Textdatei (Link im Kopfbereich).
Zur Anpassung folgende Änderungen in der CSS-Datei:

Element    hier im Beispiel   ersetzen mit  
Hintergrundfarbe solid #FFEEB0 HTML-Farbwert 
border-top: Randbreite Xpx solid #FFEEB0 X = Wert in Pixel
border-bottom: Randbreite Xpx solid #FFEEB0 X = Wert in Pixel
border-left: Randbreite Xpx solid #FFEEB0 X = Wert in Pixel
border-right: Randbreite Xpx solid #FFEEB0 X = Wert in Pixel









NACH OBEN