Cursors, Customised

Until recently, I didn't know what all the fuss was about wanting to change the appearance of the cursor on a web page. Customising a cursor is really no big deal these days and with more and more browsers supporting CSS2, things simply got a lot easier.

Why do you need to change the appearance of the cursor on a web page?

Well, here is one very good reason why: I had been testing this JavaScript code that I was supposed to use someplace else when I realised that things were not so obvious if I didn't do something about the default text cursor. Well... here, take a look! Hover your mouse over the [+] or [-] signs in the table below and click on them.
Your browser has to be JavaScript enabled.

That wasn't so obvious now was it? If I didn't point it out to you already, you would have missed the fact that they are 'clickable'.

So, how can I change the cursor's appearance?

Let's zoom-in closer into the XHTML code for just that [+] and [-] bit off that sample table before. This is how it looks now...

<p>[<span onclick="show('r1m');hide('r1l');">+</span>]

To make the text cursor appear as a pointer cursor i.e. the default cursor on a web page link that looks like a hand usually, this is what I added to the code.

<p>[<span style="cursor:pointer" onclick="show('r1m');hide('r1l');">+</span>]

Time to test it out - hover your mouse over the same plus and minus signs in the edited table below:

That's cool! So, what other cursors are there?

There are a lot more than the one listed below, but I think they're the only ones useful for now. I will update this list when I find a suitable WWW resource to the rest.

cursor: crosshair

<p style="cursor:crosshair">Hover your mouse on me!</p>

cursor: pointer

<p style="cursor:pointer">Hover your mouse on me!</p>

cursor: help

<p style="cursor:help">Hover your mouse on me!</p>

cursor: wait

<p style="cursor:wait">Hover your mouse on me!</p>

I hope this works on every browser?

Just remember what I said earlier, for this to work your readers may require the latest browser with some CSS2 support at least. So far, I know for a fact that the CSS2 cursor property works with Microsoft's Internet Explorer 6 and Mozilla 1.0. No cursor changes detected when I used Opera 6.01 to view this very page.