Geek Answers Handbook

JQuery: mouseover event in image map area

I am trying to do an overlay on the image map area. Here is my HTML:

<img src="img/denisanddavid-bkgd.jpg" alt="Denis and David - web development and solution" width="1024" height="1299" border="0" usemap="#bkgdMap" id="bkgd" />
    <map name="bkgdMap" id="bkgdMap">
         <area shape="rect" coords="12,161,341,379" href="#" alt="qdk" id="qdk" class="mapping" />
         <area shape="rect" coords="347,162,675,379" href="#" alt="gifgif" alt="gifgif" class="mapping" />
    </map>

And here is my js:

$('.mapping').mouseover(function() {

    alert($(this).attr('id'));

}).mouseout(function(){
    alert('Mouseout....');      
});

I don’t understand why, but jquery only runs for the first area, not for others. Any help would be greatly appreciated.

Thank.

+5
source share
2 answers

I just tried my code in Safari and it works as intended. 2 separate areas that give separate warnings. One of them warns “qdk” and the other “undefined”, since you do not have an ID attribute for the second card.

+4
source

Have you tried to use hovering?

example from jquery site ...

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);
0
source

More articles:


All Articles