Question

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 src 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?

Answer 1

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/