web-dev-qa-db-fra.com

Est-ce que HTML Image Maps est encore utilisé?

Est-ce que les gens utilisent toujours les anciennes cartes HTML Image? Ceux avec: 

<map name="test" id="test">
<area shape="poly" alt="" title="" coords=...

Ou existe-t-il une nouvelle, meilleure alternative?

110
ss888

Oui, les gens utilisent toujours des cartes avec images. Une alternative serait de positionner des éléments en utilisant un positionnement absolu et CSS, mais ce n'est pas nécessairement mieux. De plus, cela ne vous permet pas d'avoir des formes comme dans les cartes graphiques

51
JohnP

Ils sont dans la spécification HTML5 , ils ne seront donc pas obsolètes.

Vous pouvez toujours les utiliser librement, ils ont certainement encore leur place dans le développement Web. Ou je pourrais dire, ces rares occasions existent où vous pouvez mieux résoudre quelque chose avec une carte graphique.

45
kapa

Une solution alternative à l'utilisation de CSS ou de cartes d'image serait d'utiliser les graphiques SVG incorporés dans le dom HTML.

Un tutoriel sur la manière d'obtenir des effets de survol en utilisant cette technique est décrit dans ce tutoriel: http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs

Les éléments SVG déclenchent également les événements traditionnels tels que onmouseover et onmouseout.

18
Norman H

Oui, les cartes html sont bonnes, surtout si vous voulez que votre région soit un polygone. Vous pouvez également ajouter des effets de survol à votre carte avec javascript. Il y a un tutoriel et une démonstration Nice ici:

http://www.tutorialized.com/view/tutorial/Image-Map-Rollover/3484

17
LostLin

Les cartes d'image sont toujours conformes aux spécifications HTML5, prises en charge par tous les navigateurs.

Ils peuvent être adaptés à la conception réactive à l'aide de jQuery RWD Image Maps: https://github.com/stowball/jQuery-rwdImageMaps

Il détecte et redimensionne automatiquement les coordonnées des cartes d’image.

Il est également disponible pour les développeurs Wordpress sous forme de plugin: http://wordpress.org/plugins/responsive-image-maps/

Solution simple et efficace.

11
Daniele B

Oui, j'utilise toujours des images, mais mon dernier projet utilisait Raphaël. C'était assez facile de mettre en place quelque chose.

http://dmitrybaranovskiy.github.io/raphael/

De leur site web:

Raphaël ['ræfeɪəl] utilise la recommandation SVG du W3C et le langage VML comme base pour créer des graphiques. Cela signifie que chaque objet graphique que vous créez est également un objet DOM, vous pouvez donc attacher des gestionnaires d’événements JavaScript ou modifiez-les plus tard. L’objectif de Raphaël est de fournir un adaptateur qui permettra rendre le dessin vectoriel compatible compatible avec tous les navigateurs et facilement.

Exemple simple de carte-image simple:

http://dmitrybaranovskiy.github.io/raphael/australia.html

7
David Newcomb

Bien que je les voie rarement sur des sites Web modernes, ils semblent être utilisés par mes clients dans leurs campagnes par courrier électronique. Cependant, j'ai remarqué, et confirmé qu'il y a des problèmes de dimensionnement avec le système de coordonnées sur les appareils mobiles.

** Je sais que ce fil est ancien, je faisais juste quelques recherches supplémentaires pour résoudre un problème de campagne email récent et je pensais que cela pourrait aider quelqu'un d'autre par la suite.

5
spindle79

Oui, il a encore utilisé

Une carte d'image permet à un utilisateur de créer un lien hypertexte vers de nombreuses pages en cliquant sur différentes parties d'une image. Simplement en utilisant la carte d'image, nous créons des listes de coordonnées relatives à une zone spécifique de la même image et transmettons le lien hypertexte à un emplacement différent. En utilisant cela dans une seule image, nous donnons plusieurs liens.

Plus

0
Srikrushna Pal