Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
Grafika

Kursory

Email Drukuj PDF

Tematy: kadrowanie | kursory | sposób wyświetlania elementów | wypływanie zawartości | widzialność elementów

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, Firefox, Opera i Chrome 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.

<img src="lupus.gif" width=176 height=200 alt="Lupus" style="cursor:help">

Lupus

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 interpretują częściowo Firefox i Chrome

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 w Internet Explorerze:

Kod definicji (.ani):

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

Efekt:

Kurs HTML

Kod definicji (.cur)

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

Efekt:

Kurs HTML
 

HTML5. Rusz głową.

HTML5. Rusz głową!

HTML5. Ćwiczenia praktyczne.

HTML5. Ćwiczenia praktyczne.

HTML5. Nieoficjalny podręcznik.

HTML5. Nieoficjalny podręcznik

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 10900401