本文介绍了悬停图像映射区域时突出显示文本,反之亦然 - 使用 imagemapster的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

限时删除!!

我有一个图像、一个简单的文本菜单和 jQuery 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.

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

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

下面是基本的 jQuery 开始:

Below the basic jQuery start:

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

推荐答案

这个小提琴就是我要找的:jsfiddle.net/Tr4hE/2/

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

ruhley 在 att github 上几乎完全回答了;谢谢!github.com/jamietre/ImageMapster/issues/133

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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

1403页,肝出来的..

09-08 18:28