6

I'm trying to do actions on mouseover of an 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 the jquery is only launched for the first area and not the others. Any help would be greatly appreciated.

Thanks.

denislexic
  • 10,786
  • 23
  • 84
  • 128

2 Answers2

5

I just tried your code in Safari and it works just as intended. 2 separate areas that give out separate alerts. One is alerting "qdk" and other "undefined", as you don’t have an ID attribute for the second map.

margusholland
  • 3,306
  • 1
  • 23
  • 30
  • good catch, I never even looked at the IDs :) Sad thing is, I have burned myself on this before. – Mfoo Aug 08 '11 at 11:42
0

Did you try using hover?

example from jquery site...

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);
Mfoo
  • 3,615
  • 1
  • 16
  • 11