jQuery treat hover on two elements as one element

Question

I have an image map which I have overlaid with some markers in the form of anchors. I currently have a hover trigger on each image map area and the associated anchor - as shown in screen shot

I need to treat these two elements as one, as currently when the mouse is moved out of one into the other, it calls .hover() and the callback again. I want to call the hover callback only when the mouse is moved out of either elements.

Answer 1

$('#areaID1, #areaID2').hover(function(){
    //same mouseover event
}, function(){
    //same mouseout event
});

Answer 2

As you said that you need to treat these two elements as one so you can create a parent container and on that container you can bind event easily

<div id="mapContainer">
   <div id="areaID1"> xyz </div>
   <div id="areaID2"> xyz </div>
</div>

$('#mapContainer').hover(function(){
    //do anything
    }, function(){
    //do anything
});

Answer 3

Here is the code I am using:

MAP.area = $('#centre_map area, #map ol li');
MAP.area.hover(function() {
    // Add active classes
    // Load content
    load_map_activity($('body').attr('id'), $(this).attr('class'));
}, function() {
    // Remove active classes
})


<div id="map">
<img src="<?php echo base_url(); ?>images/bristol_map.png" alt="bristol map" usemap="#centre_map" />
<map name="centre_map" id="centre_map">
    <area shape="poly" coords="179,95,188,87,187,53,181,48,54,29,41,38,37,53,39,77,44,87" href="#" class="paintball" alt="Paintballing" />
</map>
<ol>
    <li class="paintball"><a class="marker paintball" href="#" title="Paintballing">1</a></li>
</ol>

Rory McCrossan I will try this but I fear since the anchor is layered ontop of the image map area the hover call will be made again when mouse is moved onto anchor (even though we still above map area).

Answer 4

I have managed to achieve the desired result - I was looking at the problem from the wrong angle, it's not a hover problem, but more making the ajax call.

    MAP.area = $('#centre_map area, #map ol li');
MAP.area.hover(function() {
    // Add active classes
    $('#map_key ol li a.'+$(this).attr('class')).addClass('active');
    $('#map ol li a.'+$(this).attr('class')).addClass('active');

    if(typeof MAP.current_content == 'undefined')
    {
        // Load content
        load_map_activity($('body').attr('id'), $(this).attr('class'));
    }

    if(MAP.current_content != $(this).attr('class'))
    {
        $('#map_info > *').remove();
        // Load content
        load_map_activity($('body').attr('id'), $(this).attr('class'));
    }
}, function() {
    // Remove active classes
    $('#map_key ol li a.'+$(this).attr('class')).removeClass('active');
    $('#map ol li a.'+$(this).attr('class')).removeClass('active');
})


function load_map_activity(centre, activity) {
    MAP.current_content = activity;
    $('#map_info').hide().load('/ajax/'+centre+'_'+activity, {}, function() { $(this).fadeIn('fast'); });
}

Thanks everyone who has helped.