title: Image popup on mouseover of li without hyperlink?
body: <p>I have a list and would like to have additional info (a graphic) pop up when someone mouses over the individual list items.  I thought I'd found the answer online, but this method works only on hyperlinks within <code>&lt;li&gt;</code> tags...and the problem is that I don't want to click through to the link...just have an image popup.  No link.</p>
  
  <p>Anyone know how to do this?  I can modify the script I found to work with <code>&lt;li&gt;</code>s but then it can't show different images...I can insert a fixed image, but not have it choose different ones for each <code>&lt;li&gt;</code>.</p>
  
  <p>Thanks for any suggestions or help!</p>
  
  <p>Edit:  Here's the current Javascript I'm trying to modify -- does exactly what I want...only for links, not LI elements:</p>
  
  <pre><code>(written by Alen Grakalic (http://cssglobe.com))
  
  $("a.preview").hover(function(e){
              this.t = this.title;
      this.title = "";    
      var c = (this.t != "") ? "&lt;br/&gt;" + this.t : "";
      $("body").append("&lt;p id='preview'&gt;&lt;img src='"+ this.href +"' alt='Image preview' /&gt;"+ c +"&lt;/p&gt;");                            
      $("#preview")
          .css("top",(e.pageY - xOffset) + "px")
          .css("left",(e.pageX + yOffset) + "px")
          .fadeIn("fast");                        
  },
  function(){
      this.title = this.t;    
      $("#preview").remove();
  });
  $("a.preview").mousemove(function(e){
      $("#preview")
          .css("top",(e.pageY - xOffset) + "px")
          .css("left",(e.pageX + yOffset) + "px");
  });         
  };
  
  $(document).ready(function(){
  imagePreview();
  });
  </code></pre>