How to prevent Jquery mouseover event from executing on moving mouse on transperent image area?

I have used code described on below mentioned SO answer Change the image source on rollover using jQuery to change image on mouse over.

$(function() {
    $("img")
    .mouseover(function() { 
        var src = $(this).attr("src").match(/[^\.]+/) + "over.gif";
        $(this).attr("src", src);
    })
    .mouseout(function() {
        var src = $(this).attr("src").replace("over", "");
        $(this).attr("src", src);
    });
});

Problem I am facing is that, my images are in png format which have some transparent areas. That means I have non- rectangular shaped images in my website.

Above JQuery changes image sr开发者_高级运维c even when mouse is over on transparent area.

Can someone please suggest some way so that image change occurs only when mouse is hover on visible image area?

---

you can use map html property for this http://jsfiddle.net/u9cYZ/3/

or

you can use css3 mask property check this

http://www.webkit.org/blog/181/css-masks/

http://girliemac.com/blog/2010/09/20/201/