title: jQuery show div on hover with image map
body: <p>I have an image map that I want to show a new div when I hove over the hotspots. It starts with a default listing of text but once I mouseover the hotspots, I want that to change out to the corresponding div's. I'm using the following code and am getting no joy:</p>
  
  <pre><code>$(".office-default").mouseover(function () {
      var elementId = "#office-" + $(this).attr("id").split("-")[1];
      $(elementId).removeClass("hidden");
  });
  
  $(".office-default").mouseout(function () {
      var elementId = "#office-" + $(this).attr("id").split("-")[1];
      $(elementId).addClass("hidden");
  });
  </code></pre>
  
  <p>Here's the entire code:
  <a href="http://jsfiddle.net/leadbellydesign/jR6pa/1/" rel="nofollow">http://jsfiddle.net/leadbellydesign/jR6pa/1/</a></p>
  
  <p>I've done tons of searches and have come up with nothing helpful. I don't want to change images, I just want to show div's.</p>