开发者

Display popup with text and graphics on mouse over

开发者 https://www.devze.com 2023-01-20 08:33 出处:网络
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.开发者_Python百科 The window would contain text as well as gr

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.开发者_Python百科 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?


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>


If you need to catch only mouseover and mouseleave events, maybe you should simply try to use only CSS and :hover selector on image or div, if target browsers let it.

0

精彩评论

暂无评论...
验证码 换一张
取 消