Re: Comment créer une carte interactive ?
Publié : Ven 1 Mars 2024 09:41
Dernier message de la page précédente :
Je vous ai MP.
https://mail.donjondudragon.fr/phpBB3/
https://mail.donjondudragon.fr/phpBB3/viewtopic.php?f=311&t=8417
Dernier message de la page précédente :
Je vous ai MP.Code : Tout sélectionner
<img src="/image.jpg" alt="" usemap="#map" />
<map name="map">
<area shape="poly" coords="840, 611, 1101, 677, 1109, 823, 879, 907, 791, 729" />
</map>Code : Tout sélectionner
path:"M 840, 611, 1101, 677, 1109, 823, 879, 907, 791, 729 Z"Code : Tout sélectionner
var icon_dot = [
"\uf66f", // Temples ou \uf19c
"\uf72b", // Pics des mages ou \uf6e8 ou \ue2ca
"\ue51c", // Bâtiments et monuments officiels
"\uf594", // Guildes
"\ue54f", // Ambassades
"\uf2e7", // Auberges et restaurants
"\uf0fc", // Tavernes
"\uf54e", // Commerces
"\uf7ab", // Animaux ou \uf6f0
"\ue00d", // Habitations
"\uf3c5", // Autres lieux
"\uf1bb", // Jardins
"\uf7e5", // Voirie
"\uf6d9", // Portes
"\ue4ce" // Ponts
];
szass a écrit : ↑Mar 12 Mars 2024 16:53Pour les lire la suite, il faut suivre ces étapes :
- dans le fichier html, tu définis la variable "dossier_articles" avec le nom que tu veux (ex : xitragupten)
- tu créés le dossier xitragupten dans le répertoire files/items
- pour les articles où tu veux un Lire la suite, il te faut mettre la variable "article" à 1 (dans le fichier files/data/*ta_carte*.js)
- pour chaque article complet, il te faut créer un fichier html nommé comme le lieu, en minuscules et avec des _ à la place des espaces et des apostrophes. Tu places ces fichiers dans le dossier files/items/xitragupten
Pour les coordonnées des points (x et y), tu utilises n'importe quel logiciel de retouche d'image pour avoir les coordonnées.
Tu peux superposer des zones entre elles, mais c'est pas ultra pratique en l'état. Si une zone est par-dessus une autre, celle du dessous ne sera pas cliquable.
Si tu as un quartier qui se divise en plusieurs sous quartiers ou en vue plus rapprochée, tu peux par contre créer une autre carte interactive.
Comme pour Laelith et le quartier Basse-eau : https://www.donjondudragon.fr/map/laelith.html#l145