I have a number of heroshot images, that have a modal popup when clicked. I'm trying to get my cursor to turn into magnifying glass whenever it is moved over the image. The following CSS does not appear to work even though my magnify.cur is present in the right location.
a.heroshot img {
cursor:url(/img/magnify.cur), pointer;
}
Has anyone ever done anything similar? I don't mind a js solution if one exists...
Thanks.
EDIT: It works in Safari, but not firefox...
What if you enclose the url string with apostrohes?
a.heroshot img {
cursor:url('/img/magnify.cur'), pointer;
}
Your problem may be that cursor URLs don't work in Firefox for the Mac.
You can get the same effect on Firefox by using the -moz-zoom-in keyword.
cursor:url(/img/magnify.cur), -moz-zoom-in, auto;
This will show magnify.cur, the Mozilla-specific zoom cursor or a system default cursor. The first cursor on the list that the browser supports is used.
You can also see a list of cursor keywords supported by different browsers.
This did the trick :)
a.heroshot img {
cursor:url(/img/layout/backgrounds/moz-zoom.gif), -moz-zoom-in;
}