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