Using onmouseover pn an image to display popup message and onmouseout remove popup

Question

I have a a png image of a home. whenever users place mouse on that image i have to display text "home" in some popup box and when mouseout the popup should be gone. Could anyone help me how to implement in javascript or there any functions in jquery for the required effect?

Answer 1

$(document).ready(function(){
    $("#pngImage").hover(
        function(){
            $(".popup").show();
        },
        function(){
            $(".popup").hide();
        }
    );
});

Explain:

the #pngImage is your home that where you hover your mouse. and the .popup is your popup box, could be a div that is hidden initially.

the first function insde the hover event is the mouse over, and the second function of the hover event is the mouse out.