Search code examples
htmlcssdictionarysafariarea

Safari / IE image map custom cursor not working properly

I am struggling to get my custom cursor to work when hovering over a hotspot on an image map. Firefox displays it perfectly, but in Safari / Chrome when hovering over an image map, the custom cursor show, except when you hover over an actual hotspot (area tag) on the image, then it shows the default "click cursor". It's driving me insane as I have tried each and every possible selector in the image map.

Here is the code I use:

<map name="gameImg" id="gameImg">
                    <area shape="rect" coords="299,4,358,64" class="gameElement" href="#" id="sailingBoat" name="0" />
                    <area shape="rect" coords="365,43,505,161" class="gameElement" href="#" id="cruiseShip" name="1" />
</map>

And the CSS:

#gameScreen, #gameScreen .wrapper, #gameScreen .wrapper a, #gameScreen .wrapper a:hover, #gameScreen area, #gameScreen area a, #gameScreen area a:hover, #gameScreen img, #gameScreen img a, #gameScreen img a:hover, #gameImg, #gameImg a, #gameImg a:hover, .gameElement, .gameElement a, .gameElement a:hover, #gameScreen map a, #gameScreen map a:hover, #gameScreen:hover, #gameImg:hover {
cursor: url(cursor.cur), url(images/cursor.cur), default;
}

Some of the selectors isn't shown at the top, but I added them just to ensure I cover each possible scenario.

I am sure this is purely a selector issue, but I am not sure what selectors to add to get the custom cursor to be the same irrespective if it's a link or not.

Solution

  • try this, it uses javascript

    http://www.ajaxblender.com/howto-create-custom-image-cursors.html