Use a custom cursor over an image area about imagemapster HOT 3 CLOSED

Seems to be a webkit problem:

http://stackoverflow.com/questions/8118640/safari-ie-image-map-custom-cursor-not-working-properly

If this is really important functionality, you can basically code your own image map functionality and prevent the browser from using the real one. Here is an example.

http://jsfiddle.net/jamietre/M6jBp/

What I've done is:

1. Reorder the images after ImageMapster binds so that the imagemap no longer has the highest z-index. This stops the browser from reacting to it in any way. It also makes ImageMapster not work at all when you mouse over something.
2. So to deal with that, we have to manually figure out what area someone's in and call imagemapster manually to highlight/select areas when they do something. The code I linked to only addresses "highlight" but could easily be updated to do selects too.

There are several caveats with that code.

1. It only deals with polygons. This is by far the most complex case though - rectangles are a piece of cake. Circles are a bit more work, but if you look at "tooltip.js" in the imagemapster source, there is code to map a circle to polygon coordinates which should work fine for them.

2. This is doing a lot of work. The pnpoly function has to check against all the coordinates of every area to see if the mouse is inside it on every mouse move event. This is what your browser is doing behind the scenes for imagemaps. Of course that code is written in C. We've re-written that in javascript. It's going to be way slower. It seems to work just fine in Chrome, with only a few areas. I bet it would cripple IE6 on a larger imagemap. Again, ways around this - set the "mousemove" function to call it less often using a timeout. Make sure it's finished before you call again. The logic could be optimized by first building a list of rectangular outer boundaries for each area to narrow the list down to a few before calling pnpoly each time. Not impossible to resolve - just more work.

Anyway - this is a possible solution, obviously, it requires a lot of coding to solve a very small issue and get around a very silly browser issue. I'd already written the code to detect mouse pointer in area so it was easy enough to give you a demo of a way to do this. Whether you want to chase it down to a finished product is up to you, I guess it depends how important the custom cursor is.

from imagemapster.

Thank you for that response - you did a lot of work very quickly. I wanted to verify that there wasn't some small thing that could be changed to make this work. I agree - I have to see if I can talk the client out of this requirement :) Either way I have a much better understanding of the problem now.

from imagemapster.

Have you tried setting display: block on the area element? http://stackoverflow.com/a/16047186/300038

from imagemapster.