1

在图像上标记房间：

  • 售罄
  • 预订的
  • 出售

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

这是 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 表示此房间正在出售 .... 等等

因此，当我通过鼠标悬停在该房间上检查房间状态时，此代码会用 color=red 突出显示所有其他代码，但我只想突出显示这个代码。

4

2 回答 2

2

As I stumbled over the same problem and only found this answer, I want to share my solution using imagemapster only:

I have 2 states: available & reserved. The key to only hover/highlight one area of grouped elements is to give the areas another unique area-group name (you can specifiy multiple area-group names).

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

my 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">

Now only one area will be highlighted on mouseover

于 2017-01-05T12:40:32.967 回答
1

问题解决了：

$('#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);
    }
});
于 2014-01-14T19:13:29.910 回答