Kaskadowe arkusze stylów CSS: kursory









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







Strona główna kursu
Style
Wstęp
Narzędzia
Budowa stylu
Selektory
Kaskadowość i dziedziczenie
Wstawianie stylów
Jednostki miary
Własności czcionek
Własności tekstu
Kolor i tło
Marginesy i odstępy
Obramowania
Wykazy
Tabele
Rozmiary
Pozycjonowanie
Wyświetlanie
Obrys
Własności drukowania
Zawartość generowana
Suwaki








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.


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




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):

<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