3

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?

Community
  • 1
  • 1
Maheep
  • 5,539
  • 3
  • 28
  • 47
  • 3
    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 Oct 13 '11 at 09:35
  • I am ok with any solution using some div/table surrounding the image – Maheep Oct 13 '11 at 09:40
  • @bazmegakapa: Not sure is imagemap supported by all browsers ? – Maheep Oct 13 '11 at 09:41
  • It's so ancient, that everything supports it :). And it also made it into HTML5. – kapa Oct 13 '11 at 09:43
  • 4
    here a quick demo with jQuery and map http://jsfiddle.net/at7g8/ – Sotiris Oct 13 '11 at 09:44
  • Using image map seems to be a good solution. I will give it a try. Thanks bazmegakapa & Sotiris – Maheep Oct 13 '11 at 10:03

1 Answers1

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/

sandeep
  • 91,313
  • 23
  • 137
  • 155