title: jQuery hover on imagemap does not work
body: <p>I have an imagemap and want to add a jQuery hover. Basically the whole image shall be replaced with a new one, based on an imagemap. Hovering on certain parts of the image shall result in replacing the image completely. On a mouseout of the mapped areas, it shall flip back to the imagemap. It works fine doing the imageflip with javascript, but I want to change it to jQuery in order to have mor control about the <code>fadeIn</code> and stuff like this. It just seems easier in jQuery.</p>
  
  <p>Here is what Ive got.</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
  &lt;!-- LINK ZU JQUERY ONLINE--&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  
  
  &lt;script&gt;
  //PRELOAD THE IMAGES
  original = new Image(698, 360);
  original.src = "imagenes_png/bosque_mapa.png";
  
  azul = new Image(698, 360)
  azul.src = "imagenes_png/azul_mouse.png";
  
  verde = new Image(698, 360)
  verde.src = "imagenes_png/verde_mouse.png";
  
  
  //jQUERY HOVER
  $(document).ready(function(){
      $("#verdeA").hover(function() {
          $(this).attr("src" , "verde.src");
              }, function() {
          $(this).attr("src" , "original.src");
      $("#azulA").hover(function() {
          $(this).attr("src" , "azul.src");
              }, function() {
          $(this).attr("src" , "original.src");
  
        }); 
     });
  });
  
  &lt;/script&gt;
  &lt;body&gt;
  
  &lt;!-- INSERT THE PICTURE --&gt;
  &lt;img name="bosque" id="bosque" src="imagenes_png/bosque_mapa.png" width="698" height="360" border="0" usemap="#bosque_m" alt="Bosque con animales" /&gt;
  
  &lt;map name="bosque_m" id="bosque_m"&gt;
      &lt;area id="verdeA" shape="poly" coords="643,324,646,322,648,321,651,320,654,320,656,321,658,323,659,324,660,327,659,330,657,332,655,334,654,335,654,332,653,329,653,327,650,326,648,328,648,331,649,332,650,334,652,335,654,337,656,338,658,339,660,341,662,342,662,345,661,348,660,350,657,351,656,351,656,346,656,345,653,347,651,350,650,351,651,353,651,354,653,356,656,356,658,356,660,356,662,356,666,354,668,351,669,349,670,347,669,346,665,346,666,342,667,341,668,340,670,339,672,339,674,341,676,344,676,347,675,351,672,355,670,357,669,360,642,360,644,356,646,353,647,350,648,346,650,340,650,337,646,332,645,330,644,327,643,324" 
  alt="" /&gt;
      &lt;area id="azulA" shape="poly" coords="472,249,476,249,479,250,483,251,484,255,485,258,487,261,489,263,493,265,498,266,501,268,504,270,504,271,499,270,495,269,489,268,486,269,484,270,480,269,476,268,473,266,470,262,469,260,468,256,470,253,472,249" 
      alt="" /&gt;
  &lt;/map&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>First I preload the images that the imageflip works without delay. Then I delcare the jQuery function, based on the id in my imagemap and then I add the names of the pictures assigned in the preloading.</p>
  
  <p>Buut, it does not work, at all. Nothing is happening.</p>
  
  <p>Where is the mistake?</p>