title: multiple links in picture with hover feature
body: <p>I have an image of a circle that is split into five sections. Each section goes to a different link. It is mapped as polygons. I need to create a hover effect that changes the image to a new image. The updated image will show each section (as it is hovered over) to turn into the same picture but with a green tint over that section. I have create the five new images with the tint for each section but do not know how to plug this in for CSS and HTML. If there is a way to just do the coding in HTML that would be WONDERFUL since I do not use CSS too much (clearly from code below).</p>
  
  <p>Thanks in advance :) :) :)  </p>
  
  <p>HTML below: </p>
  
  <pre><code>&lt;div Class="skyline" id="content-container" style="width: 973px"&gt;
  
  &lt;img src="images/Industry/Auto/MainPageButtons-Circle.png" alt="" width="973" height="500" usemap="#logos"/&gt;
  
  &lt;map name="logos"&gt;
  
  &lt;area shape="poly" coords="423,340,486,361,490,486,381,462,308,403,266,324,387,284" href="http://pantheontile.com/Industry-Auto-Shop.html" title="Shop" alt="Shop" /&gt;
  &lt;area shape="poly" coords="629,55,691,127,728,231,715,323,598,286,591,214,546,163" href="http://pantheontile.com/Industry-Auto-Commons.html" title="Commons" alt="Commons" /&gt;
  &lt;area shape="poly" coords="348,58,440,19,540,19,628,58,546,164,485,148,430,167" href="http://pantheontile.com/Industry-Auto-Showroom.html" title="Showroom" alt="Showroom" /&gt;
  &lt;area shape="poly" coords="426,166,391,209,382,286,264,323,251,231,284,127,347,58" href="http://pantheontile.com/Industry-Auto-Exterior.html" title="Exterior" alt="Exterior" /&gt;
  &lt;area shape="poly" coords="712,323,674,399,595,464,491,485,487,361,553,341,596,286" href="http://pantheontile.com/Industry-Auto-ServiceDrive.html" title="ServiceDrive" alt="Service Drive" /&gt;
  &lt;/map&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS below: </p>
  
  <pre><code>#skyline {
      width: 973px; height: 500px;
      background: url(images/Industry/Auto/MainPageButtons-Circle.png);
      margin: 10px auto; padding: 0;
      position: relative;}    
    #skyline li {
      margin: 0; padding: 0; list-style: none;
      position: absolute; top: 0;}
    #skyline li, #skyline a {
      height: 500px; display: block;}
  
    #Shop {left: 0; width: 95px}
    #Commons {left: 96px; width: 75px}
    #Showroom {left: 172px; width: 110px}
    #Exterior {left: 172px; width: 117px}
    #ServiceDrive {left: 117px; width: 220px}
  
    #Shop a:hover {
      background: transparent url(images/Industry/Auto/MainPageButtons-Shop.png)
      423,340,486,361,490,486,381,462,308,403,266,324,387,284 no-repeat;}
    #Commons a:hover {
      background: transparent url(images/Industry/Auto/MainPageButtons-Commons.png)
      629,55,691,127,728,231,715,323,598,286,591,214,546,163 no-repeat;}
    #Showroom a:hover {
      background: transparent url(images/Industry/Auto/MainPageButtons-Showroom.png)
      348,58,440,19,540,19,628,58,546,164,485,148,430,167 no-repeat;}
    #Exterior a:hover {
      background: transparent url(images/Industry/Auto/MainPageButtons-Exterior.png)
      426,166,391,209,382,286,264,323,251,231,284,127,347,58 no-repeat;}
    #ServiceDrive a:hover {
      background: transparent url(images/Industry/Auto/MainPageButtons-ServiceDrive.png)
      712,323,674,399,595,464,491,485,487,361,553,341,596,286 no-repeat;}
  </code></pre>