Przejdź do treści

Kursory

W tym rozdziale dowiesz się...

Kształt

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

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.

Kursory ogólnego przeznaczenia

  • 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).

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

    Przykład:

    Wskaż ten tekst myszką

  • none - brak kursora (CSS 3) - interpretuje MSIE 9, Firefox 3, Opera, Chrome

    Przykład:

    Wskaż ten tekst myszką

Odsyłacze i kursory statusu

  • context-menu - menu kontekstowe, zwykle dostępne po kliknięciu prawym przyciskiem myszki (CSS 3) - interpretuje MSIE 9, Firefox 3

    Przykład:

    Wskaż ten tekst myszką

  • help - kursor pomocy

    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ą

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

    Przykład:

    Wskaż ten tekst myszką

  • wait - "poczekaj"

    Przykład:

    Wskaż ten tekst myszką

Kursory wyboru

  • cell - wskazuje, że komórka (jak w arkuszu kalkulacyjnym) może być zaznaczona (CSS 3) - interpretuje MSIE 9, Firefox 2, Opera, Chrome

    Przykład:

    Wskaż ten tekst myszką

  • crosshair - krzyżyk

    Przykład:

    Wskaż ten tekst myszką

  • text - kursor tekstowy

    Przykład:

    Wskaż ten tekst myszką

  • vertical-text - pionowy kursor tekstowy (CSS 3) - interpretuje MSIE 6, Firefox 2, Opera, Chrome

    Przykład:

    Wskaż ten tekst myszką

Kursory "przeciągnij i upuść"

  • alias - skrót (CSS 3) - interpretuje MSIE 9, Firefox 2, Opera, Chrome

    Przykład:

    Wskaż ten tekst myszką

  • copy - kopia (CSS 3) - interpretuje MSIE 9, Firefox 2, Opera, Chrome

    Przykład:

    Wskaż ten tekst myszką

  • move - "przesuń"

    Przykład:

    Wskaż ten tekst myszką

  • no-drop - wskazuje, że przeciągany element nie może zostać upuszczony w tej pozycji (CSS 3) - interpretuje MSIE 6, Firefox 2, Opera, Chrome

    Przykład:

    Wskaż ten tekst myszką

  • not-allowed - żądana akcja nie zostanie przeprowadzona (CSS 3) - interpretuje MSIE 6, Firefox 2, Opera, Chrome

    Przykład:

    Wskaż ten tekst myszką

Kursory zmiany rozmiaru i przewijania

  • 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, gdzie jest to strzałka zwrócona w odpowiednią stronę, natomiast normalnie - 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ą

  • ns-resize - północ-południe (north-south): (CSS 3) - interpretuje MSIE 9, Firefox 2, Opera, Chrome

    Przykład:

    Wskaż ten tekst myszką

  • ew-resize - wschód-zachód (east-west): (CSS 3) - interpretuje MSIE 9, Firefox 2, Opera, Chrome

    Przykład:

    Wskaż ten tekst myszką

  • nesw-resize - północny wschód-południowy zachód (north-east south-west): (CSS 3) - interpretuje MSIE 9, Firefox 2, Opera, Chrome

    Przykład:

    Wskaż ten tekst myszką

  • nwse-resize - północny zachód-południowy wschód (north-west south-east): (CSS 3) - interpretuje MSIE 9, Firefox 2, Opera, Chrome

    Przykład:

    Wskaż ten tekst myszką

  • col-resize - pozioma zmiana szerokości kolumny: (CSS 3) - interpretuje MSIE 6, Firefox 2, Opera, Chrome

    Przykład:

    Wskaż ten tekst myszką

  • row-resize - pionowa zmiana wysokości wiersza: (CSS 3) - interpretuje MSIE 6, Firefox 2, Opera, Chrome

    Przykład:

    Wskaż ten tekst myszką

  • all-scroll - przewijanie w dowolnym kierunku: (CSS 3) - interpretuje MSIE 6, Firefox 2, Opera, Chrome

    Przykład:

    Wskaż ten tekst myszką

Kursor obrazkowy

(interpretuje MSIE 6; Firefox, Opera 15 i Chrome tylko pliki *.cur - również w systemie Linux)

  1. Domyślny gorący punkt:
    selektor { cursor: url(ścieżka dostępu), rodzaj }
  2. Ustalony gorący punkt (CSS 3 - Firefox, Chrome):
    selektor { cursor: url(ścieżka dostępu) x y, rodzaj }

Ścieżkę dostępu należy konstruować względem lokalizacji arkusza CSS, a nie względem adresu 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 }

Każdy kursor posiada ustalony jednopikselowy tzw. gorący punkt (ang. hotspot). Ten punkt jest miejscem aktywnym kursora, tzn. właśnie za jego pomocą wskazywane są elementy. Zwykle leży on na czubku grota strzałki lub w centrum krzyżyka kursora. Możemy jednak ten punkt przesunąć w prawo (wartość x) lub/i w dół (wartość y) względem lewego-górnego narożnika grafiki (wymagane jest podanie pozycji zawsze za pomocą dwóch współrzędnych).

Przykład:

Wskaż ten tekst myszką