IE Trouble with custom cursor image

HTML & CSS
1

Hey guys,
I’m attempting to change the cursor when mousing over a specific area on a lightbox type slideshow. The idea is to get rid of the arrows for next, last and close and instead change the cursor to an image that represents each action.

  • I don’t have a save as cur or ani in my photoshop so I’m saving as BMP and changing the extension to .cur. I’ve also tried this with PNG’s.

My approach is pretty simple. I just use CSS to change the cursor to an image:


#cboxLoadedContent {
    cursor: url("../images/next.cur") , default;
}

As you might expect, it works quite well in all browsers but IE. After a little research it appears that IE requires a path to the cursor image but even when I tried this approach it’s not working. My revised code looks like this:


#cboxLoadedContent {
    cursor: url("../images/next.cur"), url("path-to-images-folder/images/next.cur") , default;
}

Has anyone else attempted this?

Thanks,
Andrew

2

I did this years and years ago and it just worked straight out of the box. Just hover the second image to see the custom cursor. It works all the way back to IE6 IIRC.

The path to the cursor is from the document so use an absolute reference to make it suitable for all. The size should be 32x32 px or smaller for windows and I don’t think you can just change the extension you have to create a .cur file properly with the right software. More info here on the [URL=“http://reference.sitepoint.com/css/cursor”]Sitepoint reference.

3

Thanks Paul, I thought you might chime in!

Well it was the image format… The other browsers were able to overlook the .cur extension and interpret the image as a PNG but IE is pretty strict about images being what they say they are (probably for security being that IE is so tightly integrated with Win’s Core OS). I used a piece of software called Real World Cursor Editor to open my PNG and make it a real Cursor file.

Thanks again for nuging me in the right direction :smiley: