Can <map> and <area> be styled ?
If not, what's the simplest (and most modern) way to style different zones of a single image ?
The nice thing about <map> and <area> is that with an image map generator you don't have to calculate the position of each zone. But it seems that even though there's an href attribute, you can't style areas.
I want the zones to have {background-color: black; opacity: 0.5;} and :hover {opacity: 0;}
I could make each zone a separate image but then I would have to reassemble them into one image and I'll never feel satisfied with this.
Perhaps I could use the speed optimized technique (sprites) where I put all graphics I need into one image and display only the one I need (games do this for textures and letters).
If anyone has a lighter javascript solution than http://www.netzgesta.de/mapper/ I'm also interested.
You could make the image a background image and place invisible <a>s over top with display:block;position:absolute; etc. and then when you mouse over them, you could make them semi-transparent colors or add borders or something... that would probably look nice, and be relatively simple :)
edit: example
If you work with image maps, I'd advice you to look at ImageMapster JQuery plugin, it can realy help with many image-map manipulation tasks.
It can setup opacity and background color for selected and hover zones, as you want, and ever join different zones in one area, making them working together.
I haven't tried Mapper you named, because of it's non-commerce licence, what doesn't satisfy my developer needs. But I have tried ImageMapster myself and like how it works - it's powerfull tool under MIT licence, forked from older plugin MapHighlite.
And about lightweight... I doubt it's very important issue because javascript code works in browser, and don't slow down your server. And in case of DOM/styles manipulations works realy fast.
