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

Question

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

score 1 · Answer 1 · answered May 07 '13 at 22:21

1

Add a hover property with a function:

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

answered May 07 '13 at 22:21

4m1r

12,234
9
46
58

Thanks, but could you please elaborate and perhaps be more specific? Would like a bit more detailed code. In your fiddle an alert shows hovering any part of the image and nothing happens hovering any part of the menu. – Bo. 6 mins ago – Bo. May 07 '13 at 23:55

score 0 · Accepted Answer · answered May 12 '13 at 16:31

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

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

2 Answers2

Linked