悬停图像地图区域时反白显示文字 - 使用imagemapster [英] Highlight text when hover imagemap area and vice versa - using imagemapster

问题描述

我有一个图片，一个简单的文本菜单和 jQuery imagemapster插件。

当鼠标悬停在图像的某个区域上时，我想让相应的菜单项突出显示（如悬停），并且在悬停菜单项时，我想要相应的图像映射区以突出显示。

我已经设置了一个简单的jsfiddle来说明问题：
http://jsfiddle.net/tqpFU/23/

下面是基本的jQuery开始：

  jQuery（document）.ready（function（$）{
 $（'＃house'）。mapster（{
 mapKey：'name'，
 singleSelect：true，
 fillOpacity：0.6，
 fillColor：'FF0000'，
}）; 
}）; 
  

解决方案

这是我寻找的小提琴： jsfiddle.net/Tr4hE/2/

几乎ruhley完全通过att github回答;谢谢！
github.com/jamietre/ImageMapster/issues/133

  jQuery（document）.ready（function（$）{
 $（'＃house'）。mapster（{
 mapKey：'name'，
 singleSelect：true，
 fillOpacity：0.6，
 fillColor：'FF0000'，
 $ b $ // // b $ b 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 part = $（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）; 
}）; 
 
}）; 
 $ b $ // 
函数highlightArea（key）{
 $（'area [name = part-'+ key +']'）。 
 $（'a'）。removeClass（'hover'）; 
 $（'li.menu-item-'+ key +'a'）。addClass（'hover'）; 
 
 $ b // 
 function highlightAreaX（key）{
 $（'area [name = part-'+ key +']'）。mouseout（） ; 
 $（'li.menu-item-'+ key +'a'）。removeClass（'hover'）; 
} 
  

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

这篇关于悬停图像地图区域时反白显示文字 - 使用imagemapster的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！