Show a picture when mousemove over a text with jquery?

do you know any tutorial or script that shows a picture wh开发者_如何转开发en mousemove over a html text?

A basic example using jQuery would be something like this:

CSS

#myImage {
    display:none;
}​

HTML

<span class='pictureTrigger'>some text</span>

<img id='myImage' src='/path/to/image' />​

jQuery

$(function() {  // Makes sure DOM loads before code is run

    $('.pictureTrigger').hover(   // Assign event handlers for mouseenter/mouseleave

        function() { $('#myImage').show(); },  // Find myImage and show it on mouseenter
        function() { $('#myImage').hide(); }   // Find myImage and hide it on mouseleave
    );

});

​It's hard to give a better answer without more specifics in the question.

The basic idea is that the text is contained in a span, which has a class called pictureTrigger. Could be named anything, though.

A hover event (which is actually shorthand for two events, mouseenter and mouseleave) is added to all elements with the pictureTrigger class.

The two functions represent the mouseenter and mouseleave events respectively. The event handler functions find the img with the ID myImage, and show/hide it.

Relevant jQuery docs:

• .show() - http://api.jquery.com/show/
• .hide() - http://api.jquery.com/hide/
• .hover() - http://api.jquery.com/hover/

Google for tooltip plugin. There's a lot of them.