Question

do you know any tutorial or script that shows a picture when mousemove over a html text?

Answer 1

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/