Animer une carte

Salut,

pour le positionnement et zones cliquables il faudrait découper l'image voire utiliser une area map.
https://www.w3schools.com/tags/tag_area.asp
Ce qui est assez simple avec des formes rectangulaire.
Moi je préfère la solution de découper l'image pour pouvoir manipuler chaque élément au cas par cas c'est plus souple(chaque image étant dans un container qu'on peut cibler et modifier comme on veut).

Pour l'animation au survol plusieurs moyens aussi.
déjà pour l'animation: soit vous utilisez les animations possible en CSS voire avec une boucle d'animation en JavaScript.
ça implique d'écrire toutes les animations.
Ou en remplaçant et enlevant au survol un gif ou png animé fait préalablement.

Pour déclencher l'animation:
en pur CSS par la pseudo-classe :hover

en JavaScript en remplaçant ou en positionnant une image par dessus l'autre lors du survol (voir l’événement mouseOver mouseOut).

Aussi quelque astuce comme les animations comprises dans JQuery peuvent aider, exemples en évitant d'avoir à écrire tout le code soi-même:
https://www.w3schools.com/jquery/jquery_animate.asp

Il y a bien d'autres possibilités comme tout faire avec Canvas qui peut se prêter pas mal à ça mais tout dépends de ce que vous voulez et des possibilités d'évolutions/dynamiques nécessaires à votre projet.
Le problème de Canvas c'est qu'il faudra biaiser pour référencer le contenu des liens et images mais comme on est sur un repère cartésien orthonormé c'est assez simple de rendre l'affichage proportionnel, plus simple qu'avec un placement en CSS même si celui ci ne me paraît pas non plus insurmontable.

Le plus simple:
1)Vous positionnez chaque image sur la page au dessus de la zone voulue via une position absolue en % de l'image de la carte en fond, ça veut dire qu'il faut calculer les dimensions exactes en % de chaque image et sa position.
2)Vous indiquez un :hover qui change l'image par sa version animé(png/gif) ou alors démarrer l'animation CSS ou JS.
3) sans oublier de remettre/arrêter l'animation quand la souris sort de l'image.


Pour l'animation CSS(mieux que clip-path qui n'anime rien tout seul):
https://www.w3schools.com/css/css3_animations.asp

Bon il y a aussi le SVG mais là c'est plus pour la forme que j'en parle vu que vous utilisez des bitmap ça reviendrait à animer autre chose que les images. Mais bien sûr ça a un avantage côté poids puisque pas d'image à charger(tout comme sur Canvas qui peut "dessiner" par dessus une image ou fait un effet en utilisant la transparence).

Hello,

Le but est-il de construire toi même le système ou est-ce que tu peux faire reposer ta solution sur des services existants ? Je pense à quelque chose du genre https://www.maptiler.com/

En ce qui concerne le zoom sur la version mobile, c'est clairement une mauvaise idée de se baser sur le zoom natif.
Si ta carte doit occuper toute la hauteur de l'écran, utiliser le pinch natif va poser des problèmes. Il vaudrait mieux le bloquer via le meta viewport (https://sitebulb.com/hints/mobile-friendly/the-viewport-meta-tag-prevents-the-user-from-scaling/) et développer un système de zoom en javascript afin qu'il colle à tes besoins.

Quelle largeur la carte a-t-elle sur l'affichage desktop ?

As-tu droit d'utiliser du javascript ou est-ce que ça doit être du full HTML/CSS ?

J'ai utilisé cette technique, ça marche parfaitement, merci beaucoup !