Question

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.

Answer 1

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