6

I display a world map by an img tag. I associate an image map with it to hyperlink some regions. I overlay a bordered box div indicating a certain region can be clicked and zoomed.

Now to show the user it does this I want the cursor to change to a magnifying glass shape. I looked through the web and found something that works in firefox and ie6-8:

#zoomregion:hover { cursor: url('templates/test/styles/images/magnify.cur'), -moz-zoom-in; }

Unfortunately opera,chrome and ie9 ignore it and show the default (i.e.: pointer). How can I use cross browser custom cursor icons?

General Grievance
  • 4,555
  • 31
  • 31
  • 45
Johan van den Broek
  • 384
  • 2
  • 5
  • 18
  • A cheap way to do it would be to add an extra element to the page with the new cursor image you want, use JavaScript to always position it at the mouse, and use CSS to hide the real cursor. But you're probably not interested in doing it that way. – sdleihssirhc Jul 05 '11 at 01:40
  • 1
    I think that would keep click events from getting where they're supposed to go. – krasnerocalypse Jul 05 '11 at 01:43
  • And you're sure the image is at templates/test/styles/images/magnify.cur ? – krasnerocalypse Jul 05 '11 at 01:50
  • Yes but there are browser differences. It is explained in detail on the site Drazisil linked in his answer. – Johan van den Broek Jul 05 '11 at 09:06
  • @Johan you don't need the :hover pseudo selector for your case. – Timo Huovinen May 16 '12 at 10:37
  • related http://css-tricks.com/almanac/properties/c/cursor/ – Adriano Mar 21 '14 at 15:26
  • related http://caniuse.com/#search=cursor and also https://developer.mozilla.org/en-US/docs/Web/CSS/cursor – Adriano Sep 10 '14 at 10:39
  • http://beradrian.wordpress.com/2008/01/08/cross-browser-custom-css-cursors/ should help you in this. – Drazisil Jul 05 '11 at 02:15
  • I read about offering 2 uri notations. One with a path relative to the css file and a fallback relative to the html file. This fixed it. – Johan van den Broek Jul 05 '11 at 09:01
  • `#zoomregion:hover { cursor: url(cursor.cur),url(cursor/cursor.cur),default; }` – Adriano Aug 15 '13 at 13:36
  • according to [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_User_Interface/Using_URL_values_for_the_cursor_property) you **must** also put a keyword in the end; which may greatly improve browser compatibility over -moz-zoom-in. – Webber Jul 10 '18 at 22:47

1 Answers1

-1

The -moz- part of the -moz-zoom-in; means that it's for Mozilla only, to make it cross browser, you need all of the tags in the same id tag css:

#zoomregion:hover { 
    cursor: url('templates/test/styles/images/magnify.cur');
    -webkit-zoom-in;
    -moz-zoom-in;
    -ie-zoom-in;
    -ms-zoom-in;
    -o-zoom-in;
}

-webkit- accounts for a lot of browsers, including mobile (which, for this use, it's probably not needed) which is very useful and shortens things a lot.

Diriector_Doc
  • 582
  • 1
  • 12
  • 28
  • Are you sure about this vendor prefixes and rules? – Ferie Oct 25 '19 at 17:04
  • I posted this 2 years ago, I have no recollection of even posting this answer. However, If there was a mistake in this, I would have bee caught a long time ago. That or this solution is deprecated. However, I have no idea. – Diriector_Doc Oct 25 '19 at 17:08
  • It does not matter if it was posted 2 years ago, you still can edit it correctly, also because it is constantly searched and it is always possible to down vote it. And the mistake here is that I have never heard about a vendor prefix called `-ie-` neither is possible that rules in CSS have just the vendor prefix without any specifications. – Ferie Oct 25 '19 at 17:12
  • Well, when this was posted `-ie-` was used for Internet Explorer, but if it has been replaced, then I would be happy to fix it once I find out by what it was replaced. – Diriector_Doc Oct 25 '19 at 17:16
  • That's not true, prefixer `-ie-` has never been existed: check for example this article https://divi.space/divi-tutorials/browser-prefixes-explained/ posted in 2015 well before this answer. And then again, CSS rules like you have applied (`-webkit-zoom-in; -moz-zoom-in; ...`) are totally incorrect in syntax: check for example https://www.w3schools.com/css/css_syntax.asp on how to structure a CSS rule. – Ferie Oct 25 '19 at 23:36
  • Check also this other question from 2011 that links directly to the W3C docs https://stackoverflow.com/a/5411098/2275011 – Ferie Oct 25 '19 at 23:45
  • Well, then I have no idea what I'm doing. If you know so much, I encourage you to post your own answer. Since I clearly am unfamiliar with this topic, I, too, need a thorough and accurate answer. Evidently, you are quite experienced in the field, so I elect you to write one. It would be beneficial to everyone since, as you said, it is constantly searched. – Diriector_Doc Oct 26 '19 at 01:24
  • The problem is that there is not a real cross-browser solution for the original question yet. I have tried different solution but none is working or at least, nowadays, none is supporting old IE versions but supporting every other browsers. – Ferie Nov 26 '19 at 17:26