HTMLGoodies
The ultimate html resource
Earthweb.com


About the Double-Underlined Links


Become a Partner




Search Clipart.com:



internet.commerce















HTML Goodies : Beyond HTML : Cascading Style Sheets: CSS and Cursors

HTML GOODIES TO GO NEWSLETTER


Other Related Newsletters

CSS and Cursors


By Joe Burns

     Ah, the cursor. Some like the pointing finger, some like that I-beam-looking thing, and others try to lose the cursor altogether. Whatever your cup of tea, CSS version 2.0 is trying to help. Internet Explorer 4.0 has supported these commands as of 1/17/98. I'm sure Navigator won't be too far behind.
     Seventeen different cursor properties have been incorporated into standard CSS so you can be pretty sure some of these will work. I say "some of these" because the cursor look depends a lot more on the operating system and settings your user has set. If you didn't know it, you can set your cursor to a whole bunch of different standard settings and even install new cursors that animate. At one time, my cursor was Snoopy on his Sopwith Camel; when I clicked on something it became a TV set with snow on the screen. I'm just a fun guy, I guess.

     So I offer this chart as help. Each link points back to this page so even if you click, it'll just reload. Plus the link will be a description of what you should see.
     The Style Sheet command is incorporated by adding the STYLE="--" format into the anchor command like so:

<A HREF="/beyond/css_cursors.html
STYLE="cursor: auto">Text</A>

     Of course, you can also put these into a Style Block and alter the cursor for all your links at once:

<STYLE>
     link {cursor: crosshair}
<STYLE>

     So, here we go. These are the chosen seventeen. Roll your pointer over the top. Depending on a lot of factors, you may get it or you may not.

cursor: auto (uses what is set by user)
cursor: crosshair (should produce a cross)
cursor: default (cursor remains as it is)
cursor: e-resize (arrow pointing right)
cursor: hand (the traditional pointing hand)
cursor: help (a Question Mark should appear)
cursor: move (a cross with arrows on the tips)
cursor: n-resize (an arrow pointing north or up)
cursor: ne-resize (an arrow pointing northeast)
cursor: nw-resize (an arrow pointing northwest)
cursor: pointer (that hand again)
cursor: s-resize (an arrow pointing south or down)
cursor: se-resize (an arrow pointing southeast)
cursor: sw-resize (an arrow pointing southwest)
cursor: text (looks like the end of an I-beam)
cursor: w-resize (an arrow pointing west)
cursor: wait (an hourglass)

     There you go. Use them wisely.

Tools:
Add htmlgoodies.com to your favorites
Add htmlgoodies.com to your browser search box
IE 7 | Firefox 2.0 | Firefox 1.5.x
Receive news via our XML/RSS feed

IT Management Networking & Communications Web Development Hardware & Systems Software Development Earthwebnews.com



JupiterOnlineMedia

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info


Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers