web-dev-qa-db-fra.com

Appliquer CSS à AREA MAP

J'ai créé une très grande carte avec de nombreuses zones poly (plus de 20 coordonnées chacune) pour les régions de la carte. Cependant, vous ne pouvez pas ajouter de CSS à la balise AREA car on m'a dit que ce n'était pas un élément visible. Ce que je veux faire, c'est lorsque l'utilisateur survole une zone sur la carte, je veux qu'il soit "mis en évidence" en appliquant une bordure 1px à l'élément AREA spécifique. Y-a-t'il une façon de le faire? Non, je ne vais pas recourir à des rectangles.

22
user2385136

Si vous voulez pouvoir utiliser des formes arbitraires tout en utilisant des styles, avez-vous pensé à essayer SVG?

Je ne suis pas un maître SVG mais voici un exemple que j'ai concocté: http://jsfiddle.net/tZKuv/3/ . Pour la production, vous voudrez peut-être remplacer le trait par défaut par none, j'ai utilisé gray pour que vous puissiez voir où il se trouve.

L'inconvénient est que vous perdriez la facilité d'utilisation de la zone/carte, mais j'imagine que vous pouvez atteindre votre objectif si vous suivez cette voie. J'ai ajouté cursor: pointer au polygone et vous pouvez ajouter des gestionnaires onclick pour simuler le href de <area>.

Une mise en garde évidente est la prise en charge du navigateur. Cela semble fonctionner dans Chrome, et je suis presque sûr que cela devrait fonctionner dans IE9 (jsfiddle ne fonctionne pas dans IE9 pour le moment), mais les versions précédentes de IE ne prennent pas en charge SVG.

Mise à jour : Création d'une page de test rapide pour tester IE9. Cela fonctionne en effet comme prévu. Voici la source .

Mettre à jour à nouveau : Cela résoudrait également le problème de zoom que vous avez posé dans une autre question.

10
Sapph

Pas possible avec CSS.
Vous pouvez cependant consulter le plugin Map Hilight jQuery.

EDITER 10.2011
ImageMapster est un plugin plus récent et plus puissant que vous devriez également consulter.

16
Su'

Non, il n'y a aucun moyen de le faire comme vous le décrivez. Je l'ai recherché et essayé. Ce que vous pouvez faire est de configurer des événements de survol sur les différents segments et d'échanger une image de superposition ombrée dans la même zone.