Tutorials von Thomas Frei-Herrmann

Cursor mittels CSS ändern

Gehe mit der Maus über den Körper und über den Kopf vom Eichhörnchen (2 verschiedene Cursor in den Hotspots)

Ich habe oben mal die beiden Pseudo-Hotspots mit einem gepunkteten Rahmen versehen, damit man das besser sehen kann.

Dies sind keine NOF-Hotspots sondern transparente GIFs, die ich in einen extra Layout-Bereich gepackt habe, den ich irgendwo auf meiner Seite aufgezogen habe. Diesem Layout-Bereich habe ich dann eine eigene Position mit einem DIV-Container auf der Seite und die jeweilige ID der CSS-Einstellung gegeben. Den Hotspots von NOF kann man zwar auch eine Class geben, diese wird dann allerdings vom Internet-Explorer ignoriert, daher dieser Umweg mit den transparenten GIFs.

Wie man das mit den DIV-Containern macht, könnt Ihr hier lesen.

Hier die CSS für meine beiden DIV-Container, die in die HMTL des Layouts gehört:

> Layout klicken > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags” einfügen.

Für die verschiedenen Cursor-Varianten guckt Ihr hier:

http://de.selfhtml.org/css/eigenschaften/anzeigefenster.htm



Erstelle eine neue CSS-Formatvorlage, ich habe diese hier mal “meincursor1” und “meincursor2” genannt und füge diese Class dann in den Objekt-Editor des transparenten GIF “im Tag” (ab NOF 11 “innen”) ein.

> transparentes GIF markieren > Button “HTML” > “im Tag” einfügen:

class="meincursor1"

... unten noch ein Screenshot meiner Formatvorlage (hier “Seitenspezifisch” angelegt).

> Menü oben > Text > Formatvorlagen verwalten > Button “Neu” > Benutzerdefinierte Formatvorlage erstellen > Namen geben
> dann gleich unten “Mit CSS-Editor bearbeiten” wählen und den Befehl, wie unten im Screenshot zu sehen, einfügen.

Der einfache Pfeil wäre:

cursor: auto;