kursory

Lemur zaprasza

Kursory

Internet Explorer od wersji 4, Netscape 6 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. 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

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:

Kurs HTML

Kod definicji:

<a HREF="http://webmaster.helion.pl" style="cursor:url('banana.ani');">Kurs HTML</A>

Kurs HTML

<a HREF="http://webmaster.helion.pl" style="cursor:url('hourglass.cur');">Kurs HTML</A>