CODEWITHSUNDEEP
jquery
davewilly
davewilly

Reputation: 185

jQuery treat hover on two elements as one element

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 enter image description here

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.

Upvotes: 5

Views: 2225

Answers (4)

Anand Deep Singh
Anand Deep Singh

Reputation: 2620

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
});

Upvotes: 0

davewilly
davewilly

Reputation: 185

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.

Upvotes: 0

davewilly
davewilly

Reputation: 185

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).

Upvotes: 0

Adam Merrifield
Adam Merrifield

Reputation: 10407

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

Upvotes: 1

Related Questions