title: How to highlight selected area of map with clicking on its name in table?
body: <p>I can change background-image of selected area with javascript. When I click on Mazandaran in my table I want to have the area of Mazandaran highlighted.I use map tag.can anybody help me?</p>
  
  <p>html:</p>
  
  <pre><code>&lt;table style="float:right;width:500px;height:500px;"&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;a href="#" target="#mazandaran"&gt;Mazandaran&lt;/a&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;div id="iran3"&gt;
      &lt;img src="img/newmap.png" usemap="#newiran" /&gt;
      &lt;img id="overlay" src="" /&gt;
  &lt;/div&gt;
  &lt;map name="newiran" id="iran6"&gt;
      &lt;area alt="mazandaran" shape="poly" href="#" id="mazandaran" coords="95,63,92,68,96,72,98,75,103,77"&gt;
  </code></pre>
  
  <p>css code:</p>
  
  <pre><code>#iran3 {
      position:relative;
      width:300px;
      height:282px;
      overflow:hidden;
  }
  #iran3 &gt; img:first-child {
      display:block;
      width: 100%;
  }
  #overlay {
      position: absolute;
      top:-200px;
      left: 0px;
  }
  </code></pre>
  
  <p>javascript code:</p>
  
  <pre><code>mazandaran.onmouseover = function () {
      overlay.src = 'img/mazandaran.png';
      overlay.style.left = '90px';
      overlay.style.top = '62px';
  }
  </code></pre>