5549 sujets

Sémantique web et HTML

Bonjour à vous tous,

Je voudrais savoir si l'un de vous saurait m'expliquer comment MDN à su établir les coordonnées spatiales indiquées dans l'exemple du lien MDN ci-dessous (chiffres dans l'attribut "cords" de la balise <area>). Est-ce que MDN a utilisé un logiciel qui établit les coordonnées, en dessinant à la souris à la façon d'Illustrator, ou alors c'est établit de tête ? Voici le lien en question https://developer.mozilla.org/fr/docs/Web/HTML/Element/area

Que le code soit avec vous,
Amicalement
Il est probable que les coordonnées spatiales utilisées dans l'exemple de la balise <area> sur le site MDN ont été établies en utilisant un logiciel de création d'images ou de dessin, comme Adobe Illustrator ou un éditeur d'images en ligne. Ces logiciels permettent de créer des formes vectorielles et de définir des points de coordonnées pour chaque coin de ces formes, qui peuvent ensuite être utilisés dans les balises <area> pour définir les zones cliquables d'une image. Il est possible que l'équipe de MDN ait utilisé ces outils pour créer les exemples de code utilisés sur leur site.
Modérateur
Salut,

JENCAL a écrit :
...Adobe Illustrator ...

Sauf erreur de ma part (des décennies que je n'ai pas touchées à un Illustrator), tu n'as pas un tel outil pour réaliser ce genre de chose.

@ObiJuanKenobi: anciennement, il y avait Golive ou Dreamweaver. Si tu veux réaliser un <map><area> assez facilement, tu as GIMP. Comment faire cela ?
- la doc officielle
- tuto video (équivalent à la doc officielle)

ps: si ton image est à base de vecteurs, je ne vois pas l'intérêt de faire un map area....
Modifié par niuxe (27 Jan 2023 - 15:57)
Modérateur
Salut,

Je ne suis pas sur d'avoir bien saisi la question. Je peux dessiner une ou plusieurs formes sur Illustrator et enregistrer en svg ce qui me donnera les coordonnées dans un référentiel (le plan de travail / artboard) utilisable directement dans le web. Alors le code est parfois un peu étrange, il faut comprendre ce qui est généré, pourquoi et ce dont on peut se passer mais je l'utilise souvent oui.

Par exemple voila ce que contient le fichier svg d'un triangle fait dans illustrator sur un artboard carré de 100px quand je l'ouvre avec visual code :
<?xml version="1.0" encoding="UTF-8"?><svg id="Calque_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:#fff;}</style></defs><polygon class="cls-1" points="18.03 77.5 49.5 23 80.97 77.5 18.03 77.5"/><path d="m49.5,24l15.3,26.5,15.3,26.5H18.9l15.3-26.5,15.3-26.5m0-2l-16.17,28-16.17,28h64.66l-16.17-28-16.17-28h0Z"/></svg>

Utilisable direct dans un html (mais peut etre nettoyé/adapté un peu) :
https://jsfiddle.net/d7msctLa/

N'importe quel logiciel qui gère le vectoriel et l'enregistrement en svg le fera

Bonne soirée !
Modérateur
@_laurent: c'est ce dont je parlais dans mon postscriptum. Un object en vecteur, ça n'est pas intéressant de faire un map area. Autant utiliser les <a> dans cet objet.

En effet, n'importe quel logiciel vectoriel peut faire l'affaire. Mais attention aux attributs/valeurs en plus lors de l'export. Depuis des années, j'utilise Inkscape. Lors de l'export en svg, tu récupères des attr/val qu'il faut nettoyer. Illustrator est vraiment un très bon soft. Illustrator est intéressant si tu fais du print. Pour le web, la licence est chère pour ce que c'est de nos jours.

_laurent a écrit :
Bonne soirée !

Tu prends ton après midi ? Smiley lol
Modifié par niuxe (27 Jan 2023 - 16:45)
Modérateur
niuxe a écrit :
@_laurent: c'est ce dont je parlais dans mon postscriptum. Un object en vecteur, ça n'est pas intéressant de faire un map area. Autant utiliser les &lt;a&gt; dans cet objet.

Aaaaaah ca y est je raccroche les wagon, les map area etc... oui totalement, la dernière fois j'ai fait une carte de France avec tout les départements cliquables et j'ai calé les actions en JS directement sur chacun des path grâce a un id.

niuxe a écrit :
Tu prends ton après midi ? Smiley lol

Le soleil qui se couche pour moi c'est radical, même a 16h Smiley lol
Modérateur
_laurent a écrit :

Le soleil qui se couche pour moi c'est radical, même a 16h Smiley lol

Smiley lol

@ObiJuanKenobi : un codepen fait à l'arrache (15 minutes tout au plus) dont le résultat est pas mal

ps: il me semblait qu'en svg, l'attribut href l'élément <a> était plus particulier link ou xlink un truc comme ça).
Modifié par niuxe (27 Jan 2023 - 17:42)
Vos explications sont compliquées pour moi. Cela ne répond pas à ma question qui est quel outil utiliser pour générer les coordonnées polygonales ? Concernant Illustrator, il n'indique pas les coordonnées quand on trace une forme polygonale.