CODEWITHSUNDEEP
jqueryhtmlcssmouseevent
Maheep
Maheep

Reputation: 5605

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

Upvotes: 3

Views: 695

Answers (1)

sandeep
sandeep

Reputation: 92803

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/

Upvotes: 1

Related Questions