Set The Cursor Style
By Stephen Bucaro
With CSS you can define the type of cursor that you want to display over different elements of your
web page or during different processes performed by your program. The simplest way to demonstrate this
is by setting the type of cursor that will display when your mouse pointer enters a specific html element.
You can try this with the code shown below.
<span style="cursor:crosshair; border-style:solid;">crosshair</span>
If you set the cursor value to auto you will be letting the browser set the cursor as usual.
Setting the cursor to default sets the default cursor, typically an arrow. Setting the cursor
to none prevents any cursor from displaying. As you move your mouse pointer over each box shown below,
the indicated cursor will appear.
| crosshair |
pointer |
n-resize |
ns-resize |
| move |
grab |
ne-resize |
nesw-resize |
| all-scroll |
grabbing |
e-resize |
ew-resize |
| help |
wait |
se-resize |
nwse-resize |
| alias |
progress |
s-resize |
zoom-in |
| copy |
cell |
sw-resize |
zoom-out |
| text |
col-resize |
w-resize |
no-drop |
| vertical-text |
row-resize |
nw-resize |
not-allowed |
Depending upon your browser, some cursors may be duplicated. Although there are certain expectations
as to which cursor will appear during different operations, different browsers sometimes don't follow
the customs. When you design your own applications, to avoid confusion, you should display the cursor
that the user expects.
bones
For the element shown above, I created my own version of a not-allowed cursor.
You can do this by designing your cursor image in a 16 x 16 pixel size, and then
saving it in an image format that can have a transparent background (.gif or .png).
Below is example code to display the cursor.
<div class="showcursor" style="cursor:url(bones.gif) 2 2, pointer;">bones</div>
Note the two numbers in the style are the x-coordinate and y-coordinate of the cursor's hotspot.
When the user triggers the event that makes your custom cursor appear, there will be a slight
delay while the image for the custom cursor is downloaded. To reduce or eliminate that delay,
you can preload your image into a 1x1 pixel square and hiding it at the top of the page.
Eample code for that is shown below.
<img border="0" width="1" height="1" src="bones.gif" />
More CSS Quick Reference:
• Set an Element's Padding
• Set Text Justification
• Set an Element's Margin
• Set the Word Spacing
• Set the box-sizing Property
• Context selectors
• position:fixed
• Style the First Line
• Set List Bullets Position
• Grouped Selectors
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
