Przejdź do treści

Kursory

Kursor obrazkowy

(interpretuje MSIE 6; Firefox, Opera 15 i Chrome tylko pliki *.cur - również w systemie Linux)

  1. Domyślny gorący punkt:
    selektor { cursor: url(ścieżka dostępu), rodzaj }
  2. Ustalony gorący punkt (CSS 3 - Firefox, Chrome):
    selektor { cursor: url(ścieżka dostępu) x y, rodzaj }

Ścieżkę dostępu należy konstruować względem lokalizacji arkusza CSS, a nie względem adresu dokumentu HTML!

Zwracam również uwagę, że podanie na końcu deklaracji ogólnego rodzaju kursora jest konieczne - inaczej nie zostanie on wyświetlony w Firefoksie.

Dzięki takiej deklaracji możliwe jest wczytanie dowolnego kursora z pliku, który znajduje się, razem ze stroną, na dysku serwera w Internecie.

Przypominam, że w systemie operacyjnym Windows zwykłe kursory mają rozszerzenie *.cur, natomiast kursory animowane *.ani. Ponadto specyfikacja CSS 2.1 podaje tutaj możliwość wczytania kursora SVG.

Możliwe jest również podanie listy kursorów rozdzielonych przecinkami. W takim przypadku wczytany zostanie pierwszy z listy plik, który przeglądarka potrafi obsłużyć. Dlatego właśnie na końcu listy powinien zostać podany tradycyjny kształt:

:link, :visited { cursor: url(example.svg#linkcursor), url(hyper.cur), pointer }

Każdy kursor posiada ustalony jednopikselowy tzw. gorący punkt (ang. hotspot). Ten punkt jest miejscem aktywnym kursora, tzn. właśnie za jego pomocą wskazywane są elementy. Zwykle leży on na czubku grota strzałki lub w centrum krzyżyka kursora. Możemy jednak ten punkt przesunąć w prawo (wartość x) lub/i w dół (wartość y) względem lewego-górnego narożnika grafiki (wymagane jest podanie pozycji zawsze za pomocą dwóch współrzędnych).

Przykład:

Wskaż ten tekst myszką

Komentarze

Zobacz więcej komentarzy