title: javascript mouseover image popup with text in the popup and close button
body: <p>My current code pops up an image when I mouseover a link.</p>
  
  <p>I want to add functionality that in addition to the image, a text description is also in the popup.</p>
  
  <p>In addition, I also want an 'X' close button on the popup window that will close the popup when clicked. Currently, the image goes away when I mouseout. But I want to have the close button also.</p>
  
  <p>How do I make these additions?</p>
  
  <p>Here is my current javascript code:</p>
  
  <pre><code>$(document).ready(function() {  
  var offsetX = 10;
  var offsetY = 5;
  $('.menu').mouseover(function(e) {
      console.log(e);
      var href = $(this).attr('href');
      $('&lt;img id="image" src="' + href + '"/&gt;')
      .css('top', e.pageY + offsetY)
      .css('left', e.pageX + offsetX)
      .appendTo('body');
  }, function(e) {
      $('#image').remove();
  });
  $('.menu').mouseout(function(e) {
  
      $("#image").css('top', e.pageY + offsetY).css('left', e.pageX + offsetX);
      $('#image').remove();
  });
  
  });
  </code></pre>
  
  <p>Here is some example html code:</p>
  
  <pre><code>&lt;a id='image1' class='menu' href="images/image1.jpg" alt=""&gt;&lt;b&gt;Image Description:&lt;/b&gt; Text about this image.&lt;/a&gt;
  </code></pre>
  
  <p>Thanks</p>