Cursor responsive on transparent pixels or shapes (SVG/PNG)?

Question

css

Actually there is a map: It is


necessary to place regions on the map so that they react to the borders of regions. Those. the first option is made through imagemap. Further I think to pull up a script through areas div'y from above. But get a problem. If you insert a div, then it is straight or square, then other areas do not react to the hover. The question is, is it possible to put an SVG area or a PNG in such a way that the cursor only reacts to an object where there is a fill. (Did not react to transparent areas or areas where there is no shape)



I.e. react to the object, but do not react to the zone where the red arrows are.

jsfiddle.net/DgThK/

Answer 1

I did roughly the same thing with raphaeljs.com/ (which is SVG). I made the necessary shapes in Illustrator and exported them to SVG. And Raphael drew. Events are perfectly supported, incl. click, hover. If you want, I can even send you what I did.
You can do this with canvas too.
I wouldn't use imagemap. Too complex shapes for the areas, too laborious.

Answer 2

Maybe this will help:
stackoverflow.com/questions/11236085/create-a-map-with-clickable-provinces-states-using-svg-html-css-imagemap
The answers there discuss plugin for jQuery and implementation via svg and xslt

Answer 3

Look, is this what you are looking for?
bcrl.org.ua/map.html
I implemented this. If that's what it is, I'll tell you.

Answer 4

Make your map image a background to the block of the desired width and height, put an image of a one-pixel transparent gif on top, which is stretched to the full width and height, and already apply the imagemap map to this image, then the cursor will adequately respond only to the contour part of the area, and the filled area show below this transparent hyphae layer.
This is if done on maparea. But it’s easier to do it on raphaeljs, where you can simply do data manipulation and load data into json and a lot of all sorts of goodies.