Question

在图像上标记房间：

售罄
保留
出售

每组都有自己的颜色。当我在“待售”中悬停一个房间时，会突出显示该组中的所有房间。但我想突出这一点。

这是HTML代码：

<img src="" alt="" id="myimagemap" usemap="#imagemap" />
<map name="imagemap">
<area shape="poly" href="room,1.html" alt="Mieszkanie 01" id="mieszkanie-01" color="red" coords="18,205,18,185,27,185,27,163,86,163,86,126,136,127,137,137,150,137,151,202,79,202,79,206" />
<area shape="poly" href="room,2.html" alt="Mieszkanie 02" id="mieszkanie-02" color="red" coords="94,239,94,261,150,261,149,202,78,202,79,238" />
<area shape="poly" href="room,3.html" alt="Mieszkanie 03" id="mieszkanie-03" color="red" coords="16,305,150,304,149,260,94,260,94,239,79,239,79,243,24,244,24,229,14,230,14,243,16,243" />
</map>

ImageMapster代码：

$('#myimagemap').mapster({
    fillColor: 'ff0000',
    fillOpacity: 0.3,
    mapKey: 'color',
    areas: [
        {
            mapKey: 'red',
            fillColor: '2aff00' 
        }
    ]
});

color = red表示此房间已售出 color = green表示这个房间待售 ......等等。

因此，当我通过鼠标悬停在此房间检查房间状态时，此代码会突出显示所有其他颜色=红色但是我想突出显示这一个。

Answer 1

当我偶然发现同样的问题并且只找到了这个答案时，我想仅使用imagemapster分享我的解决方案：

我有两种状态：可用＆amp;保留。仅悬停/突出显示分组元素的一个区域的关键是为区域提供另一个唯一的区域组名称（您可以指定多个区域组名称）。

我的JS：

var image = $('#imagemap img');

image.mapster({
    isSelectable: false,
    fillColor: 'ffffff',
    fillOpacity: 0.4,
    mapKey: 'data-key',
    areas: [{
        key: 'available',
        fillColor: '54C128',
    },
        {
            key: 'reserved',
            fillColor: 'CF2B41',
        }
    ]
});

我的HTML

<area href="#" data-key="area-1,available" coords="116,105,73,62" shape="rect">
<area href="#" data-key="area-2,reserved" coords="73,197,116,237" shape="rect">
<area href="#" data-key="area-3,available" coords="75,239,116,279" shape="rect">
<area href="#" data-key="area-4,reserved" coords="75,281,116,322" shape="rect">
<area href="#" data-key="area-5,reserved" coords="73,323,116,364" shape="rect">
<area href="#" data-key="area-6,reserved" coords="64,453,113,505" shape="rect">
<area href="#" data-key="area-7,available" coords="63,504,113,554" shape="rect">
<area href="#" data-key="area-8,available" coords="65,596,116,646" shape="rect">
<area href="#" data-key="area-9,available" coords="66,647,116,697" shape="rect">

现在只有一个区域会在鼠标悬停时突出显示

Answer 2

问题解决了：

$('#myimagemap').mapster({
    fillOpacity: 0.3,
    onMouseover: function(e) {
        var value = $(this).attr("color");
        if(value == 'red'){
            $(this).mapster('set',false).mapster('set',true,{ fillColor: 'A4C715' });
        }
        if(value == 'blue'){
            $(this).mapster('set',false).mapster('set',true,{ fillColor: '3B517A' });
        }
        if(value == 'green'){
            $(this).mapster('set',false).mapster('set',true,{ fillColor: 'E7242A' });
        } 
    },
    onMouseout: function(e) { 
         $(this).mapster('set',false);
    }
});

按键分组，但只突出显示一个

2 个答案: