title: html image maps and hover css
body: <p>Im working on a image map a previous dev created as part of a navigation. It will feature the UK map cut up into regions to navigate to them parts of the site. The previous dev used img maps, but image maps dont use css correctly as image maps are a legacy method.</p>
  
  <p>Bellow is the code</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  
  #map a {
      cursor: hand;
  }
  
  &lt;/style&gt;
  
  &lt;div id="mapimage"&gt;&lt;img src="ukmap.gif" USEMAP="#map" TYPE="image/png" TITLE="Join your local network" WIDTH=294 HEIGHT=486&gt;&lt;/div&gt;
  
   &lt;map id="map" name="map"&gt;
  
  
      &lt;area shape="poly" id="northern" alt="Northern" title="Northern" coords="123,248,134,271,139,294,141,301,156,321,167,317,183,307,180,288,188,298,205,302,225,290,239,289,248,274,211,229,199,208,176,170,168,170,148,207,123,238" href="#" target="" /&gt;
  
      &lt;area id="wales" shape="poly" alt="Wales" title="Wales" coords="100,302,92,332,110,338,111,355,64,374,88,400,133,398,154,404,164,384,161,372,144,364,145,344,154,321,143,302,103,293" href="#" target="" /&gt;
  
      &lt;area id="westmidlands" shape="poly" alt="West Midlands" title="West Midlands" coords="181,368,195,360,206,351,189,326,182,305,149,321,142,358,147,369,163,376" href="#" target="" /&gt;
  
      &lt;area id="eastmidlands" shape="poly" alt="East Midlands" title="East Midlands" coords="215,365,233,341,233,328,254,320,238,284,210,293,192,304,177,290,184,320,204,353,203,366" href="#" target="" /&gt;
  
      &lt;area id="london" shape="poly" alt="London" title="London" coords="227,385,235,398,244,402,255,391,259,384,239,379,230,383" href="#" target="" /&gt;
  
      &lt;area id="east" shape="poly" alt="East" title="East" coords="260,315,287,316,288,364,271,389,259,390,246,377,225,382,222,368,217,357,235,327" href="#" target="" /&gt;
  
      &lt;area id="southwest" shape="poly" alt="South West" title="South West" coords="61,468,88,475,104,456,139,462,153,437,180,441,192,436,196,396,188,363,162,375,152,405,142,404,109,408,87,440" href="#" target="" /&gt;
  
      &lt;area id="southeast" shape="poly" alt="South East" title="South East" coords="209,445,224,429,259,429,284,409,276,386,254,391,241,405,226,388,215,363,194,369,199,401,192,436" href="#" target="" /&gt;
  
      &lt;area id="northernireland" shape="poly" alt="Northern Ireland" title="Northern Ireland" coords="46,270,56,267,81,244,58,215,33,203,1,237,0,252,9,268" href="#" target="" /&gt;
  
  &lt;/map&gt;
  </code></pre>
  
  <p>We need each of the areas to change colour on hover. would it be best to re write this using  div and ul/li with absolute positioning. Or is it possible to change the ukmap.gif with jquery/javascript on mouse over? as then i could have the same image with different areas blocked colour and change the image to mimic a css:hover, i dont want to undermine previous peoples work while at same time not wasting time rewriting it if a simple jquery hack can select these</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  
  #map a {
      cursor: hand;
  }
  
  &lt;/style&gt;
  &lt;script src="http:////ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  
      &lt;script&gt;
  $('#mapimage').mapster(
      { 
          fillColor: 'ff0000'
      });​
  &lt;/script&gt;
  
  &lt;div&gt;
      &lt;img id="mapimage" src="images/map-complete.gif" USEMAP="#map" TYPE="image/png" TITLE="Join your local network" WIDTH=294 HEIGHT=486&gt;&lt;/div&gt;
  
   &lt;map id="map" name="map"&gt;
  
  
      &lt;area shape="poly" id="northern" alt="Northern" title="Northern" coords="123,248,134,271,139,294,141,301,156,321,167,317,183,307,180,288,188,298,205,302,225,290,239,289,248,274,211,229,199,208,176,170,168,170,148,207,123,238" href="#" target="" /&gt;
  
      &lt;area id="wales" shape="poly" alt="Wales" title="Wales" coords="100,302,92,332,110,338,111,355,64,374,88,400,133,398,154,404,164,384,161,372,144,364,145,344,154,321,143,302,103,293" href="#" target="" /&gt;
  
      &lt;area id="westmidlands" shape="poly" alt="West Midlands" title="West Midlands" coords="181,368,195,360,206,351,189,326,182,305,149,321,142,358,147,369,163,376" href="#" target="" /&gt;
  
      &lt;area id="eastmidlands" shape="poly" alt="East Midlands" title="East Midlands" coords="215,365,233,341,233,328,254,320,238,284,210,293,192,304,177,290,184,320,204,353,203,366" href="#" target="" /&gt;
  
      &lt;area id="london" shape="poly" alt="London" title="London" coords="227,385,235,398,244,402,255,391,259,384,239,379,230,383" href="#" target="" /&gt;
  
      &lt;area id="east" shape="poly" alt="East" title="East" coords="260,315,287,316,288,364,271,389,259,390,246,377,225,382,222,368,217,357,235,327" href="#" target="" /&gt;
  
      &lt;area id="southwest" shape="poly" alt="South West" title="South West" coords="61,468,88,475,104,456,139,462,153,437,180,441,192,436,196,396,188,363,162,375,152,405,142,404,109,408,87,440" href="#" target="" /&gt;
  
      &lt;area id="southeast" shape="poly" alt="South East" title="South East" coords="209,445,224,429,259,429,284,409,276,386,254,391,241,405,226,388,215,363,194,369,199,401,192,436" href="#" target="" /&gt;
  
      &lt;area id="northernireland" shape="poly" alt="Northern Ireland" title="Northern Ireland" coords="46,270,56,267,81,244,58,215,33,203,1,237,0,252,9,268" href="#" target="" /&gt;
  
  &lt;/map&gt;
  ​
  </code></pre>
  
  <p>​</p>