1

画像上の im マークの部屋:

  • 完売
  • 予約済み
  • 販売のため

各グループには独自の色があります。「販売中」のある部屋にカーソルを合わせると、このグループ内のすべての部屋が強調表示されます。しかし、私はこれだけを強調したいと思います。

これは 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 で強調表示しますが、この 1 つだけを強調表示したいと思います。

4

2 に答える 2

2

私は同じ問題に遭遇し、この答えしか見つけられなかったので、以下のみを使用して解決策を共有したいと思いますimagemapster:

利用可能と予約済みの 2 つの状態があります。グループ化された要素の 1 つの領域のみをホバー/ハイライトするための鍵は、その領域に別の一意の領域グループ名を付けることです (複数の領域グループ名を指定できます)。

私の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">

マウスオーバーで 1 つの領域のみが強調表示されるようになりました

于 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 に答える