[Résolu] Image mappé adaptable aux navigateurs ?

Bonjour tout le monde c'est encore moi malheureusement je ne sais pas trop comment trouver la réponse à mon problème.

<map name="loc" id="loc">
    <area href="" alt="Info" title="Info" shape="poly" coords="300,476,324,472,333,474,337,459,342,458,359,460,353,450,354,421,364,413,368,414,364,425,376,441,384,441,375,451,375,458,381,465,376,469,381,465,376,469,381,465,376,469,381,475,388,488,379,500,367,503,330,508,313,501,308,496" />
</map>
<img id="loca" src="blabla.jpg" usemap="#loc" alt="localisation" title="localisations" />

Bon je vous ais planté le décors assez vite. Mettons que j'ai une image dont je veuilles définir une zone en tant que lien. Je définis la zone via la balise area. Mais voila imaginez que cette image s'adapte à son conteneur qui lui même s'adapte aux navigateurs et à la plate-forme (pc, mobile)

J'aimerais savoir comment faire pour que mes area définissent toujours les mêmes zones, mais que les coordonnées des points s'adaptent correctement à l'image. Car mon image s'adapte en terme de valeurs mais pas les coordonnées de mes points.

Mais cela ne modifie pas les tailles des area de la map.
Je pense que pour ce faire, cela nécessitera un petit code javascript bien moche à souhait pour effectuer cela...

De quelle manière ton contenu est-il redimensionné ?

Les zones se trouveront toujours au même endroit tandis que l'image diminuera.
Que l'image soit affichée à 100% ou à 50% car on a réduit la fenêtre, dans tous les cas les areas définis dans la map resteront fixes (mais toujours dans l'image).
Donc une image en 640*480 avec une map ayant une area occupant la moitié gauche de l'image sera cliquable partout si on redimensionne le navigateur de telle sorte que l'image ne fasse plus que la moitié de sa taille (320*240, 320 <= 640/2 donc cliquable partout).

Or, ce qu'il veut (enfin, je crois =°) c'est que ces zones soient définies en pourcentages...
En gros que
Image de 640*480 affichée à 100%
Area rectangulaire (0,0,320,480)
devienne au redimensionnement
Image de 640*480 affichée à 50% (=> 320*240)
Area rectangulaire adaptée (0,0,160,240)

Et donc il faudrait capturer le redimensionnement du navigateur (ou de l'image) et réécrire toutes les coordonnées dans la area à ce moment...

function tableauPourcentage(tab, pourcent) {
    var retour = [];
    for (var j = 0; j < tab.length; j++)
        retour.push(tab[j] * pourcentage);
    return retour;
}

function redimensionnement() {
    // récupération de ma area dans une variable => var area
    // calcul de la taille d'affichage de l'image en pourcentage => var pourcent = taille_image_actuelle / taille_originale;
    var valeurs = [1,3,5,7,...]; // Liste des coordonnées
    area.coords = "" + tableauPourcentage(valeurs, pourcent);
}

Modifié par Gothor (06 Jun 2012 - 14:41)

Bon ça ne marche pas, les area ne sont pas bien positionnées.

Je vais faire un test avec une image svg…
Modifié par Patidou (06 Jun 2012 - 14:44)

Bloodymeister a écrit :
Donc svg est en fait du xml :o merci patidou si jamais cela marche je me lancerais dans l'apprentissage de SVG

Tu sais tu peux créer tes svg dans Illustrator, inkscape ou svgedit sans taper une ligne de code.

je met mon topique en résolut vu que je sais que c'est possible maintenant reste à le réaliser
Merci a vous tous je vais regarder de plus près tout cela

Après j'ai bien réussis a faire utiliser la technologie html5 avec IE8 sans modifier le navigateur client pourquoi pas essayer aussi pour IE8 et svg =) je vais chercher merci à vous si j'ai d'autre question concernant svg je saurais ou la poser merci et bonne journée

EDIT Merci patidou je vais essayer
Modifié par Bloodymeister (06 Jun 2012 - 15:21)