Cursors & Scrollbars

  Pick a Section

Default Cursors

These are the ones that just work, without you having to upload anything.
(Move your mouse over a box to see what the cursor looks like.)

To use any of the default cursors for your whole page:

Custom Cursors

The IE browser requires a .cur or .ani file for a cursor, but Firefox & others cannot recognise .curs or .anis, but will recognise .gifs. Therefore if you want a truely cross browser custom cursor you should make both a .cur/.ani, and a .gif version of your cursor.

To make Explorer compatible cursors you'll need to find a program that will save them as .cur or .ani files. After some digging on google I found [ Ani Tuner ] which is a free program that will convert your images to .ani files.

Next you need a host that will let you upload .cur and .ani files, like [ FileDen ]

Because of the browser inconsistencies, this code will first try to use an .ani file (you can substitute this for a .cur if your cursor is in that format). The second part contains the path to a .gif which Firefox & other browsers will use as the cursor. Finally "auto" means that the browser should pick its default cursor if it can't cope with either .anis or .gifs.

Change Cursor on Mouseover

To make a different cursor show up when someone moves their mouse over something on your page, just apply the cursor code to that, instead of page body. For instance, the image below has the class "eyepic"...

...so the entire code for the image, and eggtimer-on-mouseover would be:

Alternatively I could just add the cursor style directly into the image tag, like this:

This works for both custom and standard cursors (but remember custom cursors only show up for people using the IE browser- anyone else will just see the normal arrow).

Scrollbars

Nb, custom scrollbars only show up for people using Internet Explorer or Opera browsers.

This probably doesn't require much explanation- the diagram shows you which bit is which, and below that is the code to edit them.

All you can do to scrollbars (in plain HTML/CSS at least) is set colors. Patterns or pictures won't work. You can use accepted color names, or hex codes (those are the 6 character codes preceded by a # sign in the example below).