Comment établir des coordonnées spatiales ?

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

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)

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 !

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 ?

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

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.

Relis un de mes réponses