imagemapster :rendre des styles « différents » pour différentes classes de zones

Question

est-il possible de styliser différentes zones dans différents styles dans imagemapster ?Par exemple:lorsque j'ai le plan d'une maison, un utilisateur peut cliquer sur différentes pièces :salons, chambres à coucher, salles de bains, ....Tout salon sélectionné doit être rendu en rouge, toute chambre à coucher sélectionnée doit être sélectionnée en bleu...merci kurt

Answer 1

Il n'existe actuellement aucun moyen intégré de créer un profil qui s'applique à un groupe de zones indépendantes, mais vous pouvez le faire vous-même avec juste un peu de travail.Voici un exemple fonctionnel :

http://jsfiddle.net/jamietre/RyScW/

Configurez d’abord une référence croisée :

var profiles = [
{ 
    areas: "ME,VT,CT,NH,RI,DE,MA",
    options: {
        fillColor: '0000ff'   
    }
},
{
    areas: "UT,CO,AZ,NM",
    options: {
        fillColor: '00ff00'   
    }
}
];

Ensuite, mappez les profils à un nouvel objet pour faciliter leur accès à l'aide de la "mapKey" pour chaque zone :

var optionsXref = {};

$.each(profiles,function(i,e) {
    var areas = e.areas.split(',');

    $.each(areas,function(j,key) {
        optionsXref[key]=e.options;
    });        
});

Cela convertit la structure simple que vous venez de créer en un objet qui ressemble à ceci :

{ "ME": { reference to first option group },
  "VT": { reference to first option group },
  ... 
  "UT": { reference to 2nd option group },
  ..
}

Enfin, interceptez les « clics » et sélectionnez la zone manuellement grâce aux options spécifiques :

image.mapster({
    mapKey: 'data-state',
    onClick: function(e) {
        if (e.selected) {

            // the 4th parameter is the options that area mapped to that area.

            image.mapster('set',true,e.key, optionsXref[e.key]);       
            return false;
        }            
    }
});

Le return false oblige ImageMapster à annuler sa propre gestion des clics.C'est ça.

Également par souci d'exhaustivité, vous pouvez simplement le faire à l'ancienne et attribuer les options à chaque zone :

La manière directe de procéder consiste à ajouter dès le départ des informations spécifiques à chaque zone, par ex.

$('img').mapster({
    areas: [{ 
        mapKey: 'living-room-1',
        fillColor: 'ff0000'
    },
    {
        mapKey: 'living-room-2',
        fillColor: 'ff0000'
    }, ...
    ]
);

Cela représenterait évidemment beaucoup de données si vous aviez de nombreux domaines, avec beaucoup de répétitions.Il est plus efficace et beaucoup moins de balisage de procéder dans l'autre sens.