jQuery event not defined on mouseover/mouseout...

Question

hi i have a function that worked fine using jQuery 1.3.2 but now i am trying to run it with 1.4.2 and i get the following error "event is not defined". here is the code simplified:

<div id="mapcontainer><img href="" usemap="#rage_image_map">
    <div id="mytext"></div>
</div>
<map name="rage_image_map">
    <area shape="poly" href="asthma-data/county-asthma-profiles/del-norte-county-asthma-profile" coords="12,7,10,12" alt="Del Norte County">
    <area shape="poly" href="asthma-data/county-asthma-profiles/siskyou-county-asthma-profile" coords="42,3,42,6,40,8,36,11" alt="Siskyou County">
</map>

here is the function:

$(function () {
    $('area').bind('mouseover mouseleave', function () {
        var mytext = $('#mytext');
        if (event.type == "mouseover") {
            var countyname = $(this).attr("alt");
            mytext.html(countyname);
            mytext.addClass('textcontainer');
        } else {
            mytext.text('');
            mytext.removeClass('textcontainer');
        }
    })
});

the class makes the div mytext visible and puts a line around it, displaying the county name being rolled over.

the error break in firebug is on the line defining the mytext variable. but i suspect the problem is a syntax issue below that: if (event.type == "mouseover")

thanks, Liz

Answer 1

You need to name the event parameter, like this:

$('area').bind('mouseover mouseleave', function(event){
                                                ^ add this

It's a bit easier to use .hover() though, like this:

$(function() {
  $('area').hover(function(){
    var countyname =  $(this).attr("alt");
    $('#mytext').html(countyname).addClass('textcontainer');
  }, function() {
    $('#mytext').text('').removeClass('textcontainer');
  });
});

It's not exactly the same, but a bit better usually, it uses mouseenter and mouseleave rather than mouseover and mouseout (so it won't fire when entering/leaving children).