问题描述
我有一个图片,一个简单的文本菜单和。
当鼠标悬停在图像的某个区域上时,我想让相应的菜单项突出显示(如悬停),并且在悬停菜单项时,我想要相应的图像映射区以突出显示。
我已经设置了一个简单的jsfiddle来说明问题:
下面是基本的jQuery开始:
jQuery(document).ready(function($){
$('#house')。mapster({
mapKey:'name',
singleSelect:true,
fillOpacity:0.6,
fillColor:'FF0000',
});
});
这是我寻找的小提琴:
几乎ruhley完全通过att github回答;谢谢!
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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!