title: Styling an image map
body: <p>Can <code>&lt;map&gt;</code> and <code>&lt;area&gt;</code> be styled ?<br>
  If not, what's the simplest (and most modern) way to style different zones of a single image ?</p>
  
  <p>The nice thing about <code>&lt;map&gt;</code> and <code>&lt;area&gt;</code> 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.</p>
  
  <p>I want the zones to have <code>{background-color: black; opacity: 0.5;}</code> and <code>:hover {opacity: 0;}</code></p>
  
  <p>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.</p>
  
  <p>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). </p>
  
  <p>If anyone has a lighter javascript solution than <a href="http://www.netzgesta.de/mapper/" rel="nofollow">http://www.netzgesta.de/mapper/</a> I'm also interested.</p>