Zmiana kursora dla całej strony

Poza zmianą kursora tylko dla jednego elementu można z góry zdefiniować ustawienie kursora dla całej strony, lub nawet domeny. Jest to niezwykle proste i wystarczy do kodu HTML dodać odpowiedni pęczek kodu. Dla przykładu: <html> <head> <style type=”text/css”> body {cursor:crosshair} </style> </head> <body> <b> Jakiś tekst <br> <a href=”mojastrona.htm”>Pierwszy link</a> <br> <a href=”innastrona.htm”>Drugi link</a> </b> </body> </html>  

Dodawanie specjalnego kursora

Aby dodać nowy kursor, który pokaże się po najechaniu myszką na wybrany element strony wystarczy do tego elementu przypisać unikatowe ID a następnie  określić jaki kursor ma się pokazać. W poprzednim artykule wypisane zostały wszystkie dostępne kursory a tu prezentujemy jak dodać kursor do strony. przykładowy kod: <html> <head> <style type=”text/css”> .xlink {cursor:crosshair} .hlink{cursor:help} </style> </head> <body> <b> <a href=”mojastrona.htm”>Przycisk zamknij</a> <br> <a href=”mojastrona.htm”>Przycisk pomoc</a> </b> </body> </html>

Nie-domyślne kursory

Kod CSS może określać także jak ma wyglądać kursor w różnych okolicznościach. Chociaż niektóre przeglądarki mogą mieć zdefiniowany wygląd kursora w kodzie można wpłynąć na to jak w danym momencie wygląda kursor z danego szablonu przeglądarki. Zapewne nie raz widzieliście gdzieś w Internecie, że w polu, w którym można pisać pojawia się pionowa kreska, a po najechaniu na odnośnik pojawia się kursor w kształcie ręki z wyciągniętym palcem wskazującym. W różnych innych okolicznościach kursor można dowolnie modyfikować. Spis wszystkich właściwości, które można przypisać do kursora: Wygląd Wartość Wygląd NS IE Przykład default TEST 6+ 4+ cursor:default crosshair TEST 6+ 4+ cursor:crosshair hand TEST 4+ cursor:hand pointer TEST 6+ cursor:pointer Cross browser TEST 4+ cursor:pointer;cursor:hand move TEST 6+ 4+ cursor:move text TEST 6+ 4+ cursor:text wait TEST 6+ 4+ cursor:wait help TEST 6+ 4+ cursor:help n-resize TEST 6+ 4+ cursor:n-resize ne-resize TEST 6+ 4+ cursor:ne-resize e-resize TEST 6+ 4+ cursor:e-resize se-resize…