Kursory

Dane w pigułce
Zastosowanie	zmiana kształtu kursora
Dziedziczenie	tak
Wartości	crosshair, hand, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help, default, auto, pointer, all-scroll, col-resize, row-resize, no-drop, not-allowed, progress, vertical-text
Wartość domyślna	auto
Przykład	cursor:help
Uwagi
Odpowiednik w HTML	brak

Aby określić postać kursora nad elementem, należy wpisać w definicji stylu cursor: wartość.

Internet Explorer od wersji 4, Firefox i Opera 7 interpretują definicje kursorów. Zauważmy, że przesunięcie kursora nad jakiś element strony WWW powoduje niekiedy zmianę jego kształtu. Na przykład kursor nad odsyłaczem ma kształt "łapki", nad tekstem - kształt wielkiej litery I, nad grafiką - kształt strzałki. Okazuje się, że możemy sami wybrać kształt kursora, dając dodatkową informację czytelnikowi strony. Definicja taka nie wpływa na wyświetlanie strony w innych przeglądarkach, więc jej użycie jest bezpieczne.

Kursor możemy definiować w stylach, przypisując jakiś kształt każdemu elementowi określonego rodzaju na danej stronie, czy też doraźnie tworzyć styl i przypisywać go wybranej grafice, tytułowi itd.

Definicje są niezmiernie proste. Wystarczy jedynie napisać w stylu cursor:styl_kursora. Zaprezentujmy pierwszy z brzegu przykład, w którym przesunięcie kursora myszki nad grafikę spowoduje wyświetlenie kursora ze znakiem zapytania.

Oczywiście definiowanie kursorów nie jest tylko zwykłą zabawą. Jeśli jakiś element powoduje wyświetlenie kursora ze znakiem zapytania, może to sugerować istnienie jakiejś pomocy. Podobnie, strzałka zwrócona we wskazanym kierunku może zwracać uwagę na inny obiekt na stronie.

Oto cała lista kursorów, wraz z przykładami. Aby zobaczyć dany styl kursor, wystarczy przesunąć kursor myszki nad wyraz PRZYKŁAD lub na prawo od niego. Przy "resize" n=north, s=south, w=west, e=east.

cursor:crosshair

PRZYKŁAD

cursor:hand

PRZYKŁAD

cursor:move

PRZYKŁAD

cursor:e-resize

PRZYKŁAD

cursor:ne-resize

PRZYKŁAD

cursor:nw-resize

PRZYKŁAD

cursor:n-resize

PRZYKŁAD

cursor:se-resize

PRZYKŁAD

cursor:sw-resize

PRZYKŁAD

cursor:s-resize

PRZYKŁAD

cursor:w-resize

PRZYKŁAD

cursor:text

PRZYKŁAD

cursor:wait

PRZYKŁAD

cursor:help

PRZYKŁAD

cursor:default

PRZYKŁAD

cursor:auto

PRZYKŁAD

cursor:pointer

PRZYKŁAD

cursor:all-scroll

PRZYKŁAD

cursor:col-resize

PRZYKŁAD

cursor:row-resize

PRZYKŁAD

cursor:no-drop

PRZYKŁAD

cursor:not-allowed

PRZYKŁAD

cursor:progress

PRZYKŁAD

cursor:vertical-text

PRZYKŁAD

Poniższe kursory interpretuje jedynie Netscape 6

cursor:alias

PRZYKŁAD

cursor:cell

PRZYKŁAD

cursor:copy

PRZYKŁAD

cursor:count-down

PRZYKŁAD

cursor:count-up

PRZYKŁAD

cursor:count-up-down

PRZYKŁAD

cursor:grab

PRZYKŁAD

cursor:grabbing

PRZYKŁAD

cursor:spinning

PRZYKŁAD

Default, jeśli dobrze zauważyłem, generuje zawsze typowy kształt kursora myszki, czyli strzałkę. Auto jest zgodne z domyślnymi wartościami przeglądarki.

Możliwe jest też wykorzystanie kursora w formacie .cur (statyczny) lub .ani (animowany). Oto przykłady (przesuń kursor myszki nad odsyłacz) - efekt działa na pewno w Internet Explorerze 6 i 7:

Kod definicji (.ani):

Efekt:

Kurs HTML

Kod definicji (.cur)

Efekt:

Kurs HTML