Changing the Cursor

Click here for Spanish translation

Did you know that you can change the cursor using CSS? Well, you can. It's easy, fun, but make sure you use it sparingly - visitors don't like it when you make it so whenever the cursor travels over the page it shows an hourglass :). You you probably get hundreds of restarts from your site. ;)

I will use a useful example to show you what it does. For example, what if I have a button that says help, and I want a question mark over it. Easy! Add this to your anchor tag.


<A HREF="tutorials_cursor.html" style="cursor: help">Help</a>

This is what it does: Help. Nifty huh? You can also use embeded style sheets to apply this effect to all of your links. In this example, I will make them all crosshairs.


<STYLE TYPE="text/css">
A {cursor: crosshair;}
</STYLE>

Now all of your links on the page will work with it. This is what it does: Link. You could even go as far as to add this to your external style sheet! Here is a list of all of the settings you could have.

cursor: auto (users normal)
cursor: crosshair (sa crosshair)
cursor: default (cursor remains the same)
cursor: e-resize (right arrow)
cursor: hand (a pointing hand)
cursor: help (a question mark)
cursor: move (a mover tool)
cursor: n-resize (vertical resize)
cursor: ne-resize (horizontal resize)
cursor: nw-resize (diagional resize)
cursor: pointer (a hand)
cursor: s-resize (vertical)
cursor: se-resize (diagional resize)
cursor: sw-resize (diagional resize - other way)
cursor: text (text cursor)
cursor: w-resize (horizontal resize)
cursor: wait (an hourglass)

There you go, easy huh? Now go have fun, but don't overuse it. :)

продвижение сайтов | Подарок девушке самые шикарные именные колье | first aid refill