title: JQuery to change a <map> image source when clicking and/or hovering over an <area> - what am I doing wrong?
body: <p>I've created an image map using the basic <code>map</code> and <code>area</code> tags.
  I've tested the map and all the areas behave as they are supposed to, so the HTML is definitely correct. </p>
  
  <p>I am now trying to use JQuery to get the image of the map (the source) change according to the different areas when hovering and/or clicking on them. This way I am hoping to get a sort of 'interactive' map that shows how different places on the map are connected. <br>All the areas I have defined have a unique ID.</p>
  
  <p>This is the script that I am using for the click version:</p>
  
  <pre><code>$(document).ready(function() {
      $('#area1').click(function() {
          $('#londonmap').css('src', 'area1map.png');
      });
  });​
  </code></pre>
  
  <p>The #area id name changes according to the area that is hovered on, whereas the #londonmap one is the ID of the image used as a map, the source of which needs to change according to the area you hover/click on.</p>
  
  <p>I'm not a JQuery expert, so I need to ask - what am I doing wrong?</p>