title: Image Map with Image popup on hover over hotspot
body: <p>I am building a calendar that has events on certain days. The calendar is a jpg that I have created an image map for. When you hover over a hotspot or "event" on the calendar, I want an image to hover next to the mouse pointer that will have the event information on it, and then disappear when the mouse goes off of the hotspot. I have six hotspots, and a javascript function for each. The functions replace the popup image with the correct event image. Below is an example of just one of the areas along with one function (the others are identical w/ different image names and coords)</p>
  
  <p>I had the event images popping up below the calendar on hover but the page refused to relocate the position of the image to the current mouse location. How can I make the popup image relocate? What am I doing wrong? or should I be using a different method?</p>
  
  <p>JS:</p>
  
  <pre><code>function pop(e) { //function called by first hotspot
          Image.src = "../img/Bubble - Aloha.png" //event image
          document.popup1.src = Image.src; 
          var thing = document.getElementById("popup1");
  
          $("#popup1").toggle();
          thing.style.left = e.screenX + 'px';
          thing.style.top = e.screenY + 'px';
  
          return true;
          }
  </code></pre>
  
  <p>MAP:</p>
  
  <pre><code>&lt;map id="feb1050" name="feb1050"&gt;
  &lt;area shape="rect" alt="" coords="464,170,588,263" HREF="../img/feb1050.jpg" onMouseOver="pop(event);"  onMouseOut="pop(event);"/&gt;
  ...&lt;/map&gt;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul&gt;&lt;li&gt;
          &lt;img src="../img/feb1050.jpg" width="1050" alt="calendar" USEMAP="#feb1050"&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;div id="popup"&gt;&lt;img NAME="popup1" id="popup1" src="../img/Bubble - Aloha.png" width="400" alt="calendar" style="display:none;top:-2000;left:-1000;&gt; 
          &lt;/div&gt;&lt;br /&gt;Click Here To RSVP! 
      &lt;/li&gt;
  &lt;/ul&gt; 
  </code></pre>