title: Change href link with map area when hover the area (jQuery)
body: <p>In simple words... ;-)</p>
  
  <p>I have a href list with store names and a plan of it.
  I can hover the names and the corresponding store lights up in the plan. Also hovering the plan the store light up... So far...so good...</p>
  
  <p>What I can't figure out:</p>
  
  <p>I like to set the href store name in the list in <strong>bold</strong> when hovering the store on the plan.</p>
  
  <p>A little code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
  
      &lt;link href="style.css" rel="stylesheet" type="text/css" media="screen"/&gt;
  
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="jquery.maphilight.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
      $(function() { 
  
      $('.map').maphilight({ fillColor: 'FF0000', strokeWidth: 2, fillOpacity: 0.7 });
  
      $('#w147').mouseover(function(e) { $('#m147').mouseover(); }).mouseout(function(e) { $('#m147').mouseout(); }).click(function(e) { e.preventDefault(); });
       $('#w148').mouseover(function(e) { $('#m148').mouseover(); }).mouseout(function(e) { $('#m148').mouseout(); }).click(function(e) { e.preventDefault(); });
      $('#w149').mouseover(function(e) { $('#m149').mouseover(); }).mouseout(function(e) { $('#m149').mouseout(); }).click(function(e) { e.preventDefault(); }); 
  
      });&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;map name="WinkelPlattegrond"&gt;
      &lt;area  id="m147" shape="rect" alt="Winkel 147" title="" coords="332,376,346,390" href="" target="" /&gt;
      &lt;area  id="m148" shape="rect" alt="Winkel 148" title="" coords="348,371,360,391" href="" target="" /&gt;
      &lt;area id="m149" shape="poly" alt="Winkel 149" title="" coords="339,375,339,364,361,364,361,369,346,369,347,375,340,375" href="" target="" /&gt;
  &lt;/map&gt;
  
  &lt;div style="float:left;"&gt;
  &lt;a href="#" id="w147"&gt;Winkel 147&lt;/a&gt;&lt;br&gt;
  &lt;a href="#" id="w148"&gt;Winkel 148&lt;/a&gt;&lt;br&gt;
  &lt;a href="#" id="w149"&gt;Winkel 149&lt;/a&gt;&lt;br&gt;
  &lt;/div&gt;
  
  &lt;div style="float:left;"&gt;
  &amp;nbsp;&amp;nbsp;&amp;nbsp;
  &lt;/div&gt;
  
  &lt;div style="float:left;"&gt;
  &lt;img src="plattegrond_werk.jpg" width="733" height="800" class="map" usemap="#WinkelPlattegrond"&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>