iOS 7 icons

flat icons

Get Ready Icons

metro icons

large icons

iphone icons

Download Database Toolbar Icons

professional toolbar icons

Perfect Automation Icons

Stock Icons

Toolbar Icons

How can I change the mouse pointer on a Web page?

The cursor is defined through an HTML style, so it can be applied to any element on a page that accepts HTML style definitions. You must upload the cursor file(s) to your web site. The style is then defined by referring to the cursor's path and filename. The style definition would be something like:

style="cursor: url('cursors/mycursor.cur')"

Note that the cursor path and filename has to be in quotes.

A custom cursor is defined by the "cursor:" style property CSS (cascading style sheets). The easiest way to change the cursor type is to add a style="cursor: crosshair" property within an HTML tag. e.g.

<p align="center" style="cursor: crosshair">Text</p>

The following links should change the pointer after being 'moused-over'. These show a number of built-in cursor styles that you can use:

auto	crosshair	default	pointer
help	move	text	wait

nw-resize	n-resize	ne-resize
w-resize	hand	e-resize
sw-resize	s-resize	se-resize

Some of the cursor styles may not work, depending on the browser.

Custom Mouse Pointers

The following HTML code will display a custom cursor:

<p align="center" style="cursor: url('mycursor.cur')">Text</p>

A custom URL

The user agent (i.e. browser) must be able to handle the type of cursor. Some possible file types that may work are .cur, .csr and .ani files. The above example works in Internet Explorer for Windows, but not in Netscape or IE 5.0 for Unix.

Applying a Custom Cursor to a Whole Page

To apply a cursor to an entire page, the simplest way is to apply the style to the body tag:

<body style="cursor: url('mycursor.cur')">

Applying a Custom Cursor to a Paragraph

To apply a cursor to a single paragraph, such as this one, the style can be applied to the paragraph tag itself. For example:

<p style="cursor: url('mycursor.cur.cur')">

Applying a Custom Cursor to a Hyperlink

When the mouse moves over a hyperlink, the cursor will revert to the standard "hand" style, unless you specify that you want something different. For example, I have used an animated cursor for this download link. Download cursor editor. The code for changing the link cursor was:

<a style="cursor: url('mycursor.cur')" href="http://
www.aha-soft.com/downloads/artcurs.exe">
Download cursor editor.</a>

Applying a Custom Cursor to an Image

In the same way a custom cursor can be applied to an image (point at the image below to see this in action):

 <img style="cursor: url('mycursor.cur')"
	    src="../artcursors/icon40.gif">

Applying a Custom Cursor to Table Cells

Different cursors can be applied to the cells of a table:

This cell shows the standard cursor.

This cell shows "Zoom in" cursor.

This cell shows "Zoom out" cursor.

This cell shows "Target" cursor.

Each cell has a different style attribute applied:

<td style="cursor: url('zoomin.cur')
	    " width="25%" align="center">
This cell shows Zoom in cursor.</td>

Using the <span> Tag

For most other purposes a custom cursor can be applied by means of the <span> tag. In this paragraph this method has been used to display a custom cursor wherever the words "custom cursor" appear. Point at any of the occurrences of the words "custom cursor" to see the result. Simply surround the required element with <span> tags as follows:

<span style="cursor: url('zoomin.cur')">your text goes here</span>

Applying Custom Cursors Using Stylesheets

If you use stylesheets, you can define custom cursors as styles. Here is part of the stylesheet for the this sample page for example:

Icon Software | Graphic Software | Icons Downloads | Order Icons | Ready Icons | Support

Privacy Policy | Terms of Use | Refund Policy

Copyright © 2000-2022 Aha-Soft. All rights reserved.

Perfect Toolbar Icons

Perfect Toolbar Icons

Business Toolbar Icons

Business Toolbar Icons

IconLover is our pick. It allows you to design and edit all kinds of graphics required in the software development cycle, including icons, static and animated cursors and interface elements - all these graphics can now be designed in a single application.

Toolbar Icon Set. A collection of practical and eye catching Windows icons representing all basic operations required for software development.

Business Icon Set will make your software and web products look more modern and attractive. File formats included into the set are Windows icons, GIF and PNG images.

ArtIcons Pro is an advanced icon-specific utility for Windows. It supports ICO, BMP, PNG, GIF, PSD, XPM, XBM, WBMP, CUR and ANI image formats and allows you to manage icon libraries.

Any to Icon converts icons and cursors into BMP, JPG, PNG, GIF, ICO, CUR and other formats. This wizard can find icons and make images for use on Web pages.