How to Change the Mouse Pointer

By Stephen Bucaro

Internet Explorer provides a selection of standard mouse pointers. Which standard pointer is being displayed depends upon the location and context of the mouse. Using Cascading Style Sheets (CSS) rules, it's easy to change the mouse pointer.

One possible reason to change the mouse pointer is to indicate that a link provides help information, as shown below.

Help

<a style="cursor:help;" href="#">Help</a>

Using an image's onclick event you can program an image to open a popup window when clicked. The problem with this method is that it doesn't change the pointer to indicate that the image is clickable when you move the mouse over the image. The image below uses the onclick event with the Java Script window.open function to open a popup window.

Note that the mouse pointer did not change to indicate that the image was clickable. The image below uses the same method to open a popup window, but this time a cursor style is applied to the image tag.

Below is a list of the standard pointers. Move your mouse pointer over each box to display the pointer.

crosshair pointer move text wait help

n-resize ne-resize e-resize se-resize

s-resize sw-resize w-resize nw-resize

Although it's easy to change the mouse pointer, this feature should be used sparingly. Users are accustomed to using the mouse pointer shape as an indicator as to the context of their actions. Changing the mouse pointer from the expected shape may confuse and frustrate users. For example, displaying the hour glass (cursor:wait) when no activity is occuring might be really annoying.

 General Web Design
 HTML
 Graphics Design
 CSS Quick Reference
 Easy Cascading Style Sheets
 Java Script Quick Reference
 Easy Java Script Code
 Web Design Tools
 Coding Issues

RSS Feed