1

On image im mark rooms:

  • sold out
  • reserved
  • for sale

Each group has its own color. When I hover one room with "for sale" this highlight all rooms within this group. But I want to highlight just this one.

This is HTML code:

<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 code:

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

color=red means this room is sold color=green means this room is for sale .... etc

So when i check room status by mouseover on this room, this code highlight all others with color=red but i want to highlight just this one.

Kurczakovsky
  • 75
  • 1
  • 8

2 Answers2

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

Alexander Farber
  • 21,519
  • 75
  • 241
  • 416
Bjoern
  • 23
  • 6
1

Problem solved:

$('#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);
    }
});
Kurczakovsky
  • 75
  • 1
  • 8