jQuery - Add onHover handler to area element

Question

How do I go about selecting an area element with jQuery? I need to change the CSS on a hidden div element when an area element is hovered over. I can't use CSS to accomplish this as area elements cannot be affected by CSS.

jQuery:

(function(){
  $("#trigger1").hover(
      $("#tooltip1.tooltipContent").css("display", "block");
  );
});

html (sample):

<img alt="" style="border-width: 0px; border-style: solid;" usemap="#Map2" src="_images/timeline2.jpg" />
<map id="Map2" name="Map2">
    <area id="trigger1" href="#" coords="21,99,12" shape="circle" />
</map>

live page: http://www.securitybankusa.com/about-test.htm

Answer 1

The hover() function in jQuery takes 2 functions as parameters

$("#trigger1").hover(
    function(){
        $("#tooltip1.tooltipContent").show(); // show() takes care of display block
    },
    function(){
        $("#tooltip1.tooltipContent").hide(); // hide() takes care of display none
    }
);

In your example perhaps .toggle() is more suited

$("#trigger1").hover(
    function(){
        $("#tooltip1.tooltipContent").toggle();
    }
);

Check the jQuery API page:

• hover
• toggle