Kursor obrazkowy {cursor: url}

Jak wczytać kursor (wskaźnik) myszki z pliku?

Domyślny gorący punkt:

selektor { cursor: url(ścieżka dostępu), rodzaj }

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 {cursor: url}

Wskaż ten tekst myszką

Pytania i odpowiedzi {cursor: url}

Jak ustawić dowolny kursor?

Aby ustawić dowolny kursor, użyj właściwości cursor w CSS i określ odpowiednią wartość kursora. Możesz również użyć niestandardowego obrazka jako kursora za pomocą url('ścieżka/do/obrazka.png'). Na przykład: element { cursor: url('myszka.png'), auto } ustawi niestandardowy obrazek jako kursor, który zmieni się na domyślny (auto) w przypadku braku dostępności.

Jak zrobić "customowy" kursor?

Aby stworzyć niestandardowy kursor, można użyć właściwości cursor w CSS i wskazać ścieżkę do własnego obrazka kursora za pomocą url('ścieżka/do/obrazka.png'). Na przykład: element { cursor: url('kursor.png'), auto } ustawi niestandardowy obrazek jako kursor, a auto zostanie użyte, jeśli obrazek nie będzie dostępny.