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…

Three column layout

<style type=”text/css”> <!– #header { background: #0f0; position: absolute; top: 0px; left: 0px; width: 800px; height: 100px; } #leftcol { background: #f00; position: absolute; top: 100px; left: 0px; width: 150px; height: 500px; } #rightcol { background: #f00; position: absolute; top: 100px; left: 650px; width: 150px; height: 500px; } #content { background: #fff; position: absolute; top: 100px; left: 150px; width: 500px; height: 500px; } #footer { background: #0f0; position: absolute; top: 500px; left: 0px; width: 800px; height: 100px; } –> </style> The HTML code is the following: <div id=”header”>Header Section</div> <div id=”leftcol”>Left Section</div> <div id=”content”>Content Section</div> <div id=”rightcol”>Right Section</div> <div id=”footer”>Footer Section</div> Here is the complete code: <html> <head> <title>THREE-COLUMN FIXED LAYOUT WITH FIXED BOXES</title> <style type=”text/css”> <!– #header { background: #0f0; position: absolute; top: 0px; left: 0px; width: 800px; height: 100px; } #leftcol { background: #f00; position: absolute; top: 100px; left: 0px; width: 150px; height: 500px; } #rightcol { background:…