Inne działy

 

 

CSS - kursory

 

Właściwość CSS cursor pozwala określić typ kursora, który powinien być wyświetlany dla użytkownika.

Dobrym przykładem zastosowania tej właściwości jest przesyłanie formularzy przy użyciu obrazów, kiedy obrazek spełnia rolę przycisku. Domyślnie, gdy kursor zostanie ustawiony nad linkiem, kursor zmienia się w wskaźnik łapki. Na przycisku Prześlij na formie to się nie zdarza. W związku z tym za pomocą właściwość cursor można zmienić kursor na łapkę, gdy ktoś unosi go nad obrazem, na przycisku Prześlij. Zapewnia to wizualne wrażenie, że można go kliknąć.

Tabela poniżej pokazuje możliwe wartości właściwości cursor:

 

WartośćOpis
auto Kształt kursora zależy od kontekstu obszaru, nad którym znajduję się Na przykład strzałka nad tekstem, łapka nad linkiem i tak dalej...
crosshair Krzyżyk lub znak plus
default Strzałka
pointer Przyjmuje kształt dłoni (w IE 4 ta wartość to ręka)
move Pasek
e-resize Kursor wskazuje, że krawędź pola może być przesuwana w prawo 
ne-resize Kursor wskazuje, że krawędź pola może być przesuwana w górę i w prawo 
nw-resize Kursor wskazuje, że krawędź pola może bć przesuwana w górę i w lewo 
n-resize Kursor wskazuje, że krawędź pola może być przesuwana w górę 
se-resize Kursor wskazuje, że krawędź pola może być przesunięta na dół i w prawo 
sw-resize Kursor wskazuje, że krawędź pola może być przesunięta na dół i w lewo 
s-resize Kursor wskazuje, że krawędź pola może być przesunięta w dół 
w-resize Kursor wskazuje, że krawędź pola może być przesunięta w lewo 
text Pasek
wait Klepsydra
help A znak zapytania z balonem, idealny do stosowania na przyciski Pomoc
<url> Źródło pliku z obrazem kursora

 

 Uwaga: Należy próbować używać tylko te wartości do dodania pomocnych informacji dla użytkowników, w miejscach, w których oczekuje kursora. Na przykład za pomocą krzyżyka, gdy ktoś przenosi kursor nad linkiem może to zmylić odwiedzającego.

Oto przykład:

 

<p>Najedź myszką na napis aby zobaczyć jak kursor zmieni kształt:</p>
<div style="cursor:auto">Auto</div>
<div style="cursor:crosshair">Crosshair</div>
<div style="cursor:default">Default</div>
<div style="cursor:pointer">Pointer</div>
<div style="cursor:move">Move</div>
<div style="cursor:e-resize">e-resize</div>
<div style="cursor:ne-resize">ne-resize</div>
<div style="cursor:nw-resize">nw-resize</div>
<div style="cursor:n-resize">n-resize</div>
<div style="cursor:se-resize">se-resize</div>
<div style="cursor:sw-resize">sw-resize</div>
<div style="cursor:s-resize">s-resize</div>
<div style="cursor:w-resize">w-resize</div>
<div style="cursor:text">text</div>
<div style="cursor:wait">wait</div>
<div style="cursor:help">help</div>

 Poniżej wynik działania kodu:

Najedź myszką na napis aby zobaczyć jak kursor zmieni kształt:

Auto
Crosshair
Default
Pointer
Move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help

 

Zobacz nasze wszystkie kursy

WWW


HTML
HTML - Znaczniki
CSS - Tutorial
CSS - Selektory
PHP
JavaScript

XML

XSLT

Bazy danych


SQL
SQLite
MySQL
PostgreSQL

 

 

Programowanie


C
C++
C#
Java
VisualBasic
Python

Linux


Podstawy Linuxa
Bash
Linuks artykuły

Windows


Excel funkcje
Windows wskazówki
Outlook

Pozotałe działy


Programy
Rozrywka

 

 

 

This email address is being protected from spambots. You need JavaScript enabled to view it.