Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Set The Cursor Style

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.


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" />

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro

Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268