title: Hover effects on irregular polygons in CSS
body: <p>I'm wondering how to go about marking up and coding hover effects for a map similar to <a href="http://www.cityoflondon.gov.uk/NR/rdonlyres/EF4D21CC-4FC5-4E7F-BE8C-ED4DBA54C8A2/0/areamap_m.jpg" rel="noreferrer">this image</a>.</p>
  
  <p>When each district (or section) is moused over/touched/clicked I need to change the colour of it without affecting any other section. The boundaries on each section must be representative of the image and shouldn't be squares. The solution can't use canvas since the site I'm working on has to be usable in older browsers (I'm gutted, personally.)</p>
  
  <p>Ideally I want to do this with CSS without using too much JavaScript or loads of images. Has anyone done this before?</p>
  
  <p>Edit: I know people are suggesting the <code>&lt;area&gt;</code> tag, but AFAIK, it doesn't accept the :hover pseudo class.</p>
  
  <p>Edit 2: I might use this: <a href="http://www.netzgesta.de/mapper/" rel="noreferrer">http://www.netzgesta.de/mapper/</a></p>