Display popup with text and graphics on mouse over

Question

I want to have a popup window such that when the user hovers mouse over the image, it displays that popup window on the right of the image. The window would contain text as well as graphics. The window should close the moment my mouse is out of the image. I tried various scripts that are on the internet, but they show the text as innerhtml of the same page. So that breaks my original page. Is there a way to have a box with text and graphics come up when I roll over the image and go away when I close it?

Answer 1

Check out jQuery qtip -- http://craigsworks.com/projects/qtip/

Demos: http://craigsworks.com/projects/qtip/demos/

---

Edit: Sample Code (straight from QTip's demo site). This will give the effect seen on http://craigsworks.com/projects/qtip/demos/content/basic

<script type="text/javascript" src="your/path/to/qtip.js"></script>
<script type="text/javascript">
// Create the tooltips only on document load
$(document).ready(function() 
{
   // Match all link elements with href attributes within the content div
   $('#content a[href]').qtip(
   {
      content: 'Some basic content for the tooltip' // Give it some content, in this case a simple string
   });
});
</script>

Answer 2

如果只需要捕获mouseover和mouseleave事件，也许如果目标浏览器允许的话，您应该只尝试在image或div上仅使用CSS和：hover选择器。