Image map responsive

Bonsoir,

Tout d'abord excusez moi d'avance pour mon orthographe et pour la clarté de mon explication.

Voilà j'ai une amie qui pour un projet en html/css a choisie l'Afrique du Sud et sur sa page d'accueil elle a incorporée une image de la carte de l'Afrique du sud (elle a fait sur photoshop cette image). Sur cette image elle a placée à différentes coordonnées les villes importantes sous forme de liens renvoyant vers la page html du pays.

Voilà l'html :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <div id="contenu"> <p class="cliquez_ville">Cliquez sur une ville !</p> <p><a href="javascript:recherche()" id="recherche_avancee">Recherche</a></p>  <div id="carte"> <img id="carte_img" src="images/carte.png" alt="carte" title="Afrique du Sud" usemap="#carte"/> <map name = "carte">  <area shape = "circle" coords = "553,78,10" href="polokwane.html" /> <area shape = "circle" coords = "619,151,10" href="nelspruit.html" /> <area shape = "circle" coords = "496,153,10" href="pretoria.html" /> <area shape = "circle" coords = "488,176,10" href="johannesburg.html" /> <area shape = "circle" coords = "199,275,10" href="upington.html" /> <area shape = "circle" coords = "348,285,10" href="kimberley.html" /> <area shape = "circle" coords = "422,304,10" href="bloemfontein.html" /> <area shape = "circle" coords = "101,519,10" href="lecap.html" /> <area shape = "circle" coords = "470,470,10" href="eastlondon.html" /> <area shape = "circle" coords = "375,510,10" href="portelisabeth.html" /> <area shape = "circle" coords = "500,270,10" href="bethlehem.html" /> <area shape = "circle" coords = "579,327,10" href="pietermaritzburg.html" /> <area shape = "circle" coords = "604,339,10" href="durban.html" /> </a> </div> </div>
Donc le problème est qu'elle aimerait que quand on réduit la page internet : la carte se réduise, or pour cela il aurait fallut la redéfinir en %, mais vous comprenez que c'est impossible à cause des "coords" (les coordonnées des villes faisant office de liens pour chaque villes) qui serait après plus les bons.

En gros notre prof bannit toutes formes de px car il veut que nos sites fonctionnent sous tout environnement et sur téléphone donc tout ce qui gène à cela n'est pas bon.. et la carte gène.

Je me demandais si quelqu'un a une solution.

Désolé si je n'ai pas été clair, je me tiens à votre disposition pour des incompréhensions.

Merci d'avance.

Bonjour

pour un map , tu peut éventuellement avec les media querie definir des paliers et appliqué un transform:scale(); qui permet de changer l'echelle de tous les elements,en incluant les zones réactives.

L'ideal serait de faire la carte en SVG de façon a ce qu'elle se redimensionne sans perte de qualité et automatiquement.

++

Effectivement, l'utilisation de SVG pour ce cas semble plus appropriée.

Au pire, HTML 4 autorise des coordonnées en pourcentages (mais pas HTML5).

Bonjour,

Pour ajouter à ce qui a été dit plus haut il y a ce plugin avec la démo et des tutoriels.