Les cartes d'images HTML sont-elles toujours utilisées?

113

Les gens utilisent-ils toujours les anciennes cartes d'images HTML? Ceux avec:

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

Ou existe-t-il une alternative plus récente et meilleure?

html imagemap

— ss888
source

1

Lorsque vous demandez s'il y a quelque chose de mieux ou pas, vous devez donner un moyen de comparaison. Mieux de quelle manière ou dans quel but? Il existe des outils plus puissants que les images maps à notre disposition, plus complexes aussi ...

— Jeff Parker

2

Bon point - Je n'ai pas utilisé de carte image depuis longtemps et j'ai pensé qu'elle avait peut-être été remplacée par une méthode de codage améliorée.

— ss888

1

Les fonctionnalités basées sur Javascript / couche et le flash ont remplacé les cartes d'image dans à peu près tout ce que je rencontre ... Je ne me souviens pas de la dernière fois que j'en ai vu une en service actif. Si vous avez un objectif spécifique en tête, une réponse plus spécifique pourrait être plus facilement disponible :)

— Jeff Parker

21

Je préfère éviter Flash de nos jours lol.

— ss888

4

Si vous cherchez quelque chose de rapide à faire, rapide à exécuter et légèrement mauvais, les images cartographiques feront l'affaire. Il n'y a pas de remplaçant largement soutenu qui fera le travail à la même vitesse à mon avis. Maintenant, si vous aviez le temps pour SVG, Canvas, et que cela ne vous dérangeait pas d'exclure IE de votre liste de navigateurs pris en charge ...

— Jeff Parker

53

Oui, les gens utilisent toujours des cartes d'images. Une alternative serait de positionner les éléments en utilisant le positionnement absolu et CSS mais ce n'est pas forcément mieux. Il ne vous permet pas non plus d'avoir des formes comme dans les cartes d'image

— JohnP
source

Ok, donc les cartes d'images html sont toujours bonnes? Que diriez-vous d'ajouter des effets de survol / survol?

— ss888

mon problème majeur avec les images cartographiques est que contrairement aux images qu'ils associent, elles ne s'adaptent pas à la taille du navigateur ou de l'écran. J'espère que l'OP recherche les formats SVG

— Martin

2

vous devez le mettre à l'échelle avec la taille de l'image. Faire votre taille d'image par rapport à la taille de la fenêtre. puis toujours en comparant ce rapport largeur / hauteur au rapport de la carte d'image, puis en utilisant javascript pour écraser les coordonnées. Le gestionnaire d'événement de taille d'image basé sur jquery est $ (window) .resize (function () {.... yourcode ...});

— skidadon

46

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 d'image.

— kapa
source

19

Une solution alternative à l'utilisation de CSS ou de cartes d'images serait d'utiliser des graphiques SVG intégrés dans le dom HTML.

Un tutoriel sur la façon d'obtenir des effets de survol de souris à l'aide de cette technique est décrit dans ce tutoriel: http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs

Le principal à retenir est que les éléments SVG déclenchent également des événements dom traditionnels, y compris onmouseover et onmouseout .

— Norman H
source

1

+1 SVG est la meilleure alternative directe aux imagemaps, car l'interaction peut être avec n'importe quelle forme arbitraire. Quelque chose de très similaire aux imagemaps peut être créé où les coordonnées vectorielles découpent des images de pixels raster, en donnant aux éléments SVG un remplissage d'image . Mais même dans ce cas, les cartes de zone peuvent être meilleures dans certains cas (elles sont plus simples et ne recadrent pas l'image, ce qui peut parfois être souhaitable).

— user56reinstatemonica8

18

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

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

— LostLin
source

8

+1 - Bien que vous puissiez faire beaucoup avec CSS et le positionnement absolu, les cartes d'images sont toujours le seul moyen de détecter le survol sur une zone de polygone non rectangulaire.

— Blazemonger

10

Les cartes d'image sont toujours dans les 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.

— Daniele B
source

9

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

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

Depuis leur site Web:

Raphaël ['ræfeɪəl] utilise la recommandation SVG W3C et 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 les modifier ultérieurement. L'objectif de Raphaël est de fournir un adaptateur qui rendra le dessin vectoriel compatible cross-browser et facile.

Bel exemple de carte d'image simple:

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

— David Newcomb
source

2

Il ne vous aurait pas fallu beaucoup de temps pour réparer le lien vous-même au lieu de gémir et de voter contre :(

— David Newcomb

2

Cher David, j'ai supprimé le vote défavorable. Comment voulez-vous que je répare le lien qui est simplement rompu? Je supprimerais http://raphaeljs.com/complètement et ne fournirais que l'exemple Github.

— orschiro

6

Le point de stack-sites est la collaboration. Si vous voyez un lien cassé, corrigez-le si vous le pouvez. Ne pensez pas à cela en termes de liens brisés, ce sont des pointeurs brisés vers des ressources. Si la ressource a déménagé, mettez à jour le lien pour qu'il pointe vers le nouvel emplacement de la ressource: c'est l'important. Raphaeljs avait son propre site mais il est évidemment passé sur GitHub. Renvoyons-nous les gens vers Google pour savoir où il vit actuellement? Ou les aidons-nous à partir d'ici? L'exemple de l'Australie est le même exemple, il vit dans un endroit différent.

— David Newcomb

Le http://raphaeljs.com/lien finira par se rompre lorsque l'enregistrement de domaine expirera, mais il y a maintenant une redirection dessus pour donner à tout le monde (dans le monde) une chance de mettre à jour leurs liens. Peut-être que @orschiro vous pourriez commencer par celui de l'article et ajouter à l'effort de collaboration ici à SO.

— David Newcomb

1

Compris, merci David! J'ai mis à jour la réponse et corrigé le lien. :-)

— orschiro

4

Bien que je les vois rarement utilisés sur les 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 existe des problèmes de mise à l'échelle avec le système de coordonnées sur les appareils mobiles.

** Je sais que ce fil est vieux, je faisais juste quelques recherches supplémentaires à ce sujet pour un récent problème de campagne par e-mail et j'ai pensé que cela pourrait aider quelqu'un d'autre sur toute la ligne.

Modification tierce

La question sur litmus.com sur le support des cartes d'images date de 04/2014

Les images maps ne prennent pas en charge les balises ALT, lorsque les images ne sont pas chargées, le texte ALT n'est pas affiché dans certains clients.

L'utilisation d'images cartographiques entraîne généralement l'utilisation d'images de grande taille qui peuvent entraîner des problèmes de délivrabilité et entraver la vitesse de téléchargement (ce qui est particulièrement important pour les utilisateurs mobiles).

Et surtout, l'iOS (iphone / ipad) ne met pas à l'échelle les coordonnées du lien de la carte d'image lorsque l'image est mise à l'échelle, ce qui rompt les liens. Étant donné qu'iOS représente une grande majorité des ouvertures d'e-mails (iPhone + iPad = 38% via http://emailclientmarketshare.com/ ), c'est important.

— broche79
source

0

Oui, il est toujours utilisé

Une image map 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 l'image map, nous créons des listes de coordonnées relatives à une zone spécifique de la même image et donnons le lien hypertexte vers un emplacement différent. En utilisant cela dans une seule image, nous donnons plusieurs liens.

Plus

— Srikrushna
source

-2

image map est une option assez intéressante en html et html5, ils sont toujours utilisés et je l'aime personnellement, je trouve donc que l'utilisation dans les appareils mobiles est mon problème lié à la mise à l'échelle

oui je l'ai vécu moi-même mais je suis un étudiant inscrit en html html5 et pour les débutants, je voudrais suivre le lien w3chools

http://www.w3schools.com/html/html_images.asp

vous gagnerez beaucoup de cette [page

— Shoua Iqbal
source