About Tutorialübersicht Labels Header Goodies Tutorialwünsche

Cursor einbinden (Normal + Hover)

Mittwoch, 7. November 2012

Ich möchte euch heute erklären, wie ihr euren Cursor (Anzeigepfeil) ändert. Und auch den, wenn ihr über Links fahrt. Live seht ihr das auf meinem Blog. Wenn ihr da über einen Link, ein Bild mit der Maus fahrt, ändert sich der Cursor. Das ist ganz einfach!


Für alle drei Varianten brauchen wir diesen Schritt:

Ihr sucht euch einen Cursor auf, beispielsweise auf Seiten wie 'cursor-4U'.
Nun brauchen wir den Cursorlink! Ihr geht auf 'Option 2' und kopiert den Code irgendwo hin. Ich habe diesen:
/* Start http://www.cursors-4u.com */ body, a:hover {cursor: url(http://cur.cursors-4u.net/others/oth-6/oth589.cur), progress !important;} /* End http://www.cursors-4u.com */
Den rot markierten Teil brauchen wir.

I. Cursor ändern (ohne Hover)

Bei 'Layout' in der Bloggeroberfäche HTML/Javascript einfügen, an eine unauffällige Stelle. Dann einfach eure Cursor-URL an die markierte Stelle setzen. Fertig!
<style> body, a, a:hover { cursor:url('CURSOR-URL'), auto; }</style>

II. Cursor mit Hover

1. Normaler Cursor
Sucht nach body { oder body, .body-fauxcolumn-outer { in eurem HTML-Teil (Vorlage -> HTML bearbeiten -> Fortfahren)
Dort fügt ihr
cursor: url(CURSOR-URL), auto; 
ein.

Jetzt sollte der Cursor so sein, wie ihr es wolltet. Aber wenn ihr jetzt über einen Link fahrt, kommt wieder die ursprüngliche Maus. Aber das wollen wir ja nicht, oder? ;)


2. Hover Cursor
Deswegen geht's hier jetzt weiter. Sucht euch den nächsten Cursor aus und holt euch wieder die Cursor-URL.
In eurem HTML-Teil sucht ihr nun nach a:hover, was aber eigentlich ganz in der Nähe von body { sein müsste
Jetzt haben wir diesen Code:
cursor: url(CURSOR-URL), progress; 
 und den fügt ihr darunter ein.

gar nicht so schwer, was?
Ich wünsche euch viel Spaß mit dem Cursor! :)

Kommentare:

  1. Hey, hat alles super geklappt :))

    Bei mir musste ich allerdings nur den Bloggercode beim Javascript einsetzten und schon blieb die der coursor auch so wie er sein sollte, also das er sich nicht ändert bei einem link ;))

    AntwortenLöschen
  2. *_* wie cool =)
    Ist echt ganz einfach, danke für das tolle Tutorial!
    gglG

    AntwortenLöschen