Mauszeiger

[Bildschirmfoto] 
Mauszeiger

Auch der Mauszeiger (Cursor) kann verändert werden. Der Code kann auf alle Elemente, egal ob Tabellen, Links, Grafiken, Textblöcke oder eine ganze Seite angewendet werden.

Beispiel für Text:
<p style="cursor: help;"> Beispieltext </p>

Attribut Bedeutung Beispiel
default Standard  
 
none Kein Cursor!  
 
crosshair Fadenkreuz  
 
wait Sanduhr (je nach Betriebsystem)  
 
progress Zeiger u. Sanduhr (je nach Betriebsystem)  
 
help Hilfeinformationen sind verfügbar  
 
e-resize Pfeil - rechts  
 
w-resize Pfeil - links  
 
n-resize Pfeil - oben  
 
nw-resize Pfeil - links oben  
 
ne-resize Pfeil - rechts oben  
 
text Horizontales Text-Symbol  
 
vertical-text Vertikales Text-Symbol  
 
cell Zellen-Symbol  
 
Attribut Bedeutung Beispiel
not-allowed Nicht Erlaubt!  
 
no-drop Nicht Erlaubt!  
 
move Kreuz mit Pfeilen  
 
all-scroll Kreuz mit Pfeilen  
 
col-resize Die Größe des Elements/der Spalte kann horizontal geändert werden.  
 
row-resize Die Größe des Elements/der Spalte kann vertikal geändert werden.  
 
alias Ein Alias oder eine Verknüpfung soll erstellt werden  
 
copy Etwas soll kopiert werden  
 
pointer Handsymbol (ausgestreckter Zeigefinger)  
 
grab Handsymbol  
 
grabbing Handsymbol (Hand greift)  
 
zoom-in Lupen-Plus-Symbol  
 
zoom-out Lupen-Minus-Symbol  
 
url('cursor.png')
 
Beliebiger Cursor  
 

Das Attribut „hand” wird nur vom Internet Explorer unterstützt! Verwenden Sie statt dessen das Attribut „pointer”.

Mit dem Microsoft Edge (Internet Explorer), Mozilla Firefox und dem Google Chrome Browser lassen sich auch andere beliebige Cursor (Mauszeiger) auf der Webseite anzeigen. Der Cursor kann im Format .png, .gif, .jpg, .cur oder .ani vorliegen.

Beispiel

<style>
body {
  cursor: url('cursor.png'), auto;
}
</style>

Tipps

Bilder mit Wasserzeichen markieren
JPEG-Bilder (oder andere Grafikformate) können mit einem transparenten Wasserzeichen markiert werden; Mit Hilfe eines kleinen PHP-Scripts.
Sitemaps-Protokoll für Suchmaschinen automatisch erstellen
Sorgen Sie dafür, dass die Nutzer auf einen größeren Teil Ihrer Website aufmerksam werden mit einem „Sitemaps-Protokoll”. Dies stellt eine einfache Möglichkeit für Webmaster dar, Suchmaschinen Seiten auf Ihrer Website zu melden, die zum durchsuchen verfügbar sind.
Bilder in den Browser laden per File API
Wenn Bilder hoch geladen werden sollen, ist es für dem Benutzer wissenswert welche Bilder er überhaupt ausgewählt hat. Diese JavaScript-Funktion zeigt Bilder vor dem hochladen im Browser an.