Redimensionnement images avec calques

Bonjour à toutes et à tous,

Je bloque sur une image pour qu'elle puisse s'adapter à tous les types d'écran.

Il s'agit d'une carte de France avec des calques des régions. Auriez-vous déjà eu l'occasion de travailler sur un sujet identique (image + calque) ?

Le lien de la page en question


merci de vos conseils ou solutions

Bonjour,

En SVG, rendre une carte cliquable responsive est extrêmement simple, en effet comme tout élément html block le SVG adopte un comportement width 100% natif. Exemple.

Mais comme vous êtes passé par une balise canevas (dans la logique du pixel, donc "naturellement non-responsive"), avec des maps area (idem), là ce n'est plus du tout la même chose. Il va falloir sortir le basooka avec des scripts pour recalculer les points des aires en fonction de la taille de l'élément parent...

Un script en jQuery (proposé ailleurs par 6l20).
Modifié par Olivier C (22 Dec 2015 - 06:16)

[quote=Olivier C]Bonjour,

En SVG, rendre une carte cliquable responsive est extrêmement simple, en effet comme tout élément html block le SVG adopte un comportement width 100% natif. Exemple.

Mais comme vous êtes passé par une balise canevas (dans la logique du pixel, donc "naturellement non-responsive"), avec des maps area (idem), là ce n'est plus du tout la même chose. Il va falloir sortir le basooka avec des scripts pour recalculer les points des aires en fonction de la taille de l'élément parent.../quote]


OULA je vais m'amuser !!

merci pour ton conseil.
Bonnes fêtes de fin d'année