Kursory

W tym rozdziale dowiesz się...

Kształt

(interpretuje Internet Explorer 4, Netscape 6/Mozilla/Firefox i Opera 7)

selektor { cursor: rodzaj }
Selektorem może być praktycznie dowolny znacznik [zobacz: Wstawianie stylów].

Natomiast "rodzaj" odpowiada za kształt, jaki przybierze wskaźnik myszki, po naprowadzeniu go na dany element. Możliwe są tutaj następujące wartości:
  • auto - automatyczny wybór kształtu kursora (zależy od typu elementu, na który wskazujemy - tryb domyślny)

    Przykład:

    Wskaż ten tekst myszką

    Zauważ, że kształt kursora typu "auto" powinien zmieniać się w zależności od tego, czy wskażesz myszką tekst czy fragment tła znajdującego się pod nim (już bez tekstu).

  • crosshair - krzyżyk

    Przykład:

    Wskaż ten tekst myszką

  • default - kursor domyślny (strzałka)

    Przykład:

    Wskaż ten tekst myszką

  • pointer - wskaźnik (wskazuje odsyłacz) - nie interpretuje MSIE 4

    Przykład:

    Wskaż ten tekst myszką

  • hand - dłoń

    UWAGA! Kursor typu "hand" nie wchodzi w skład specyfikacji CSS 2.

    Przykład:

    Wskaż ten tekst myszką

  • move - "przesuń"

    Przykład:

    Wskaż ten tekst myszką

  • n-resize - "północ" (north): w MSIE 5 - strzałka w górę, w MSIE 6 - kursor zmiany rozmiaru pionowego

    UWAGA! Kursory z grupy "resize" są odmiennie wyświetlane w MSIE 5 i w MSIE 6. W pierwszym przypadku (MSIE 5) jest to strzałka zwrócona w odpowiednią stronę, natomiast w drugim (MSIE 6) - kursor zmiany określonego rozmiaru.

    Przykład:

    Wskaż ten tekst myszką

  • ne-resize - "północny wschód" (north-east): w MSIE 5 - strzałka, w MSIE 6 - kursor zmiany rozmiaru

    Przykład:

    Wskaż ten tekst myszką

  • e-resize - "wschód" (east): w MSIE 5 - strzałka w prawo, w MSIE 6 - kursor zmiany rozmiaru poziomego

    Przykład:

    Wskaż ten tekst myszką

  • se-resize - "południowy wschód" (south-east): w MSIE 5 - strzałka, w MSIE 6 - kursor zmiany rozmiaru

    Przykład:

    Wskaż ten tekst myszką

  • s-resize - "południe" (south): w MSIE 5 - strzałka w gół, w MSIE 6 - kursor zmiany rozmiaru pionowego

    Przykład:

    Wskaż ten tekst myszką

  • sw-resize - "południowy zachód" (south-west): w MSIE 5 - strzałka, w MSIE 6 - kursor zmiany rozmiaru

    Przykład:

    Wskaż ten tekst myszką

  • w-resize - "zachód" (west): w MSIE 5 - strzałka w lewo, w MSIE 6 - kursor zmiany rozmiaru poziomego

    Przykład:

    Wskaż ten tekst myszką

  • nw-resize - "północny zachód" (north-west): w MSIE 5 - strzałka, w MSIE 6 - kursor zmiany rozmiaru

    Przykład:

    Wskaż ten tekst myszką

  • text - kursor tekstowy

    Przykład:

    Wskaż ten tekst myszką

  • wait - "poczekaj"

    Przykład:

    Wskaż ten tekst myszką

  • progress - "postęp" - interpretuje MSIE 6, ale nie MSIE 5 (CSS 2.1, ale nie CSS 2)

    Przykład:

    Wskaż ten tekst myszką

  • help - kursor pomocy

    Przykład:

    Wskaż ten tekst myszką

Kursor obrazkowy

(interpretuje MSIE 6, ale nie MSIE 5; Firefox tylko pliki *.cur również w systemie Linux)

selektor { cursor: url(ścieżka dostępu), rodzaj }

Ścieżkę dostępu należy konstruować względem arkusza CSS, a nie względem dokumentu HTML!

Zwracam również uwagę, że podanie na końcu deklaracji ogólnego rodzaju kursora jest konieczne - inaczej nie zostanie on wyświetlony w Firefoksie.

Dzięki takiej deklaracji możliwe jest wczytanie dowolnego kursora z pliku, który znajduje się, razem ze stroną, na dysku serwera w Internecie.

Przypominam, że w systemie operacyjnym Windows zwykłe kursory mają rozszerzenie *.cur, natomiast kursory animowane *.ani. Ponadto specyfikacja CSS 2.1 podaje tutaj możliwość wczytania kursora SVG.

Możliwe jest również podanie listy kursorów rozdzielonych przecinkami. W takim przypadku wczytany zostanie pierwszy z listy plik, który przeglądarka potrafi obsłużyć. Dlatego właśnie na końcu listy powinien zostać podany tradycyjny kształt:

:link, :visited { cursor: url(example.svg#linkcursor), url(hyper.cur), pointer }

Przykład:

Wskaż ten tekst myszką