Custom Cursor

Antar Bolaeisk · 24 May 2011 at 12:28

Hello all,

I was wondering if you could provide a bit of guidance, I'm looking to use a custom cursor on a website for an upcoming event and from what I can see I should be able to use the CSS style command to do so. Unfortunately I've had no success so far. I've hosted the .cur file on google sites and tried adding the code "style=cursor:url 'cursorpath'" to a div container.

Any help or info on the matter would be greatly appreciated, bear in mind that I'm still quite new to html so keep things as simple as possible for me.

Thanks in advance,
Antar.

GravyMonster · 24 May 2011 at 12:49

I think your CSS may be wrong, try this:

Code:

.myelement { 
    cursor: url(../locationof/cursor.cur)
}

Having a custom image as a cursor is something that's not widely used or supported though, so be aware that you'll need something that degrades gracefully if someone can't see your specific cursor - like a tooltip.

ollie101 · 27 May 2011 at 11:33

I'm not sure that if it's any more widely supported than the above CSS, but you could also hide the mouse cursor and set an image to move to the mouse position using Javscript. If you do it this way, I'd recommend hiding the cursor using javascript rather than a stylesheet in case the user doesn't have Javascript enabled - otherwise they'd have no cursor or replacement image

Antar Bolaeisk · 28 May 2011 at 21:55

Oh, didn't think of using Java, thanks Ollie!

sharkkk · 29 May 2011 at 12:26

*Javascript; don't use Java for this!