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

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?

With simple Javascript/jQuery, you don't have access to the image data. You can't decide whether a part of it is visible or not. Maybe an old school image map could be a solution for you. — kapa
– kapa, Commented Oct 13, 2011 at 9:35
I am ok with any solution using some div/table surrounding the image — Maheep
– Maheep, Commented Oct 13, 2011 at 9:40
@bazmegakapa: Not sure is imagemap supported by all browsers ? — Maheep
– Maheep, Commented Oct 13, 2011 at 9:41
It's so ancient, that everything supports it :). And it also made it into HTML5. — kapa
– kapa, Commented Oct 13, 2011 at 9:43

sandeep · Accepted Answer · 2011-10-13 09:53:29Z

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/

answered Oct 13, 2011 at 9:53

sandeep

93.2k24 gold badges140 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related