Discussion :

[Raideman]

Bonjour,

J'ai un problème assez embetant et je fais donc appel à vous.
J'ai une application web qui nécessite le chargement dynamique d'une image et de son mapping.
J'ai donc dans ma page le squelette suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<img id="img_catalog" src="" usemap="#Map">
<div id="mapping_code">
</div>

puis plus bas, une fonction ajax qui va récupérer en fonction d'un paremètre l'image et le mapping à implanter ainsi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("mapping_code").innerHTML="<map name=\"Map\"><area shape=\"rect\" coords=\"4,4,183,301\" href=\"\" /></map>";

Et a chaque clic de l'utilisateur je veux changer le mapping en chargeant le mapping adéquat. Au niveau du progammre, tout tourne bien, le mapping est bien changé a chaque clic comme je le veux, cependant , le navigateur garde en mémoire le premier mapping et ne rafraichit pas les zones de clic en fontion de mon mapping !
Par exemple, mon image1 a une zone clicable rectangulaire, quand je charge l'image 2 et son mapping polygonal, au niveau du code source tout est chargé correctement mais j'ai toujours la zone clicable rectangulaire qui reste. Comme si le premier mapping n'etait pas retiré de la mémoire, preuve en est que si je charge directement la page sur l'image 2, j'ai bien le mapping polygonal qui est load.

Si vous pouviez m'aider, ce serait le top.

[Raideman]

En fait j'ai résolu mon problème.
La solution a été de créer un usermap unique pour chaque image que je chargeais ce qui permet de rafraichir le mapping sans problème. Réécrire par dessus un mapping existant en Ajax est ainsi plus facile.
J'ai donc par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<img id="img_catalog" src="" usemap="#Map1">
<div id="mapping_code">
</div>

puis quand je charge une autre image jai

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<img id="img_catalog" src="" usemap="#Map2">
<div id="mapping_code">
</div>

Avec les mapping correspondant