Collected by
Elizabeth Janson
Home Page

Cursor Types

  Cascaded Style Sheets (CSS) supports the cursor attribute. The cursor attribute allows you to specify what the cursor will look like when it is over an element. A simple application is when you want to indicate to the user that the text titled "Click Here" would perform an action when clicked, just like a text link on a Web page. Using the cursor attribute eliminates the need to use an anchor tag to change the cursor.

Specifying the cursor is fairly simple. You just define it in an HTML element, such as the following:

<SPAN CLASS="block" STYLE="cursor: crosshair">crosshair</SPAN>

The SPAN's content may be, among other things, an image:

<SPAN CLASS="block" STYLE="cursor: crosshair">"bc.gif"</SPAN>

Here are all the cursor types supported. Just move your cursor on top of the titles and see the actual cursor type in action:

crosshair default hand move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help

Internet Explorer supports the cursor CSS property. It accepts one of the following values:

PropertyDescription
autoBrowser determines which cursor to display based on the current context
crosshairSimple crosshair
defaultPlatform-dependent default cursor (usually an arrow)
handHand
moveCrossed arrows indicating something is to be moved
Arrow shows
edge to be moved		Direction may be n-resize, ne-resize, nw-resize, s-resize, se-resize, sw-resize, e-resize, or w-resize
textEditable text (usually an I-bar)
waitHourglass or watch indicating that the program is busy and the user should wait
helpArrow with question mark indicating help is available

If you're using Internet Explorer, pass the mouse over this paragraph. The style of the cursor changes to crosshair:

<FONT ... STYLE="cursor: crosshair">any text here</FONT>

The cursor property can be applied to almost any HTML element, including the <BODY> tag. The cursor property can also be set in JavaScript:

object.style.cursor = shape;

For example, the following statement changes the cursor anywhere on the page:

document.body.style.cursor = "wait";

On to using DIV to put captions under pictures.

Email
CSS begins here
Back to tool-tips or on to image positioning.

This page is part of Elizabeth Janson's web site

http://www.oocities.org/elizatk/index.html

My other sites are the Anglican Parish of Northern Mallee,
Tetbury residents in the Eighteenth Century
my Australian Family History and Barrie, our Family Poet.