jqueryhoverimagemapster

Highlight text when hover imagemap area and vice versa - using imagemapster


I have an image, a simple text menu and the jQuery imagemapster plugin.

When hovering an area of the image, I'd like the corresponding menu item to highlight (as in hover) and when hovering a menu item, I'd like the corresponding image map area to highlight.

I've set up a simple jsfiddle to illustrate the problem: http://jsfiddle.net/tqpFU/23/

Below the basic jQuery start:

jQuery(document).ready(function ($) {
    $('#house').mapster({
        mapKey: 'name',
        singleSelect: true,
        fillOpacity: 0.6,
        fillColor: 'FF0000',
    });
});

Solution

  • This fiddle is what I was looking for:jsfiddle.net/Tr4hE/2/

    Almost entirely answered by ruhley over att github; thanks! github.com/jamietre/ImageMapster/issues/133

    jQuery(document).ready(function ($) {
        $('#house').mapster({
            mapKey: 'name',
            singleSelect: true,
            fillOpacity: 0.6,
            fillColor: 'FF0000',
    
            //
            onMouseover: function (evt) {
                var parts = evt.key.split('-');
                var part = parts[1];
                highlightArea(part);
            },
    
            //
            onMouseout: function (evt) {
                var parts = evt.key.split('-');
                var part = parts[1];
                highlightAreaX(part);
            }
    
        });
    
            //
            $('a').hover(function () {
                var parts = $(this).closest('li').attr('class').split('-');
                var part = parts[2];
                highlightArea(part);
            });
    
            //
            $('a').mouseleave(function () {
                var parts = $(this).closest('li').attr('class').split('-');
                var part = parts[2];
                highlightAreaX(part);
            });
    
    });
    
    //
    function highlightArea(key) {
        $('area[name=part-' + key + ']').mouseenter();
        $('a').removeClass('hover');
        $('li.menu-item-' + key + ' a').addClass('hover');
    }
    
    //
    function highlightAreaX(key) {
        $('area[name=part-' + key + ']').mouseout();
        $('li.menu-item-' + key + ' a').removeClass('hover');
    }