5568 sujets

Sémantique web et HTML

Images reactives en cascade

Bonjour à tous,
Je réalise un site sur lequel des liens de la première page ouvrent des images en position fixe.
Jusque là pas de problème :


<html>
<head>
</head>
<body>

<IMG name="image" src="cabinet.jpg"  usemap="#"  border=0>

<a href=# onclick="document.image.src='image1.jpg';">Lien 1</a>
<a href=# onclick="document.image.src='image2.jpg';">Lien 2</a>
<a href=# onclick="document.image.src='image3.jpg';">Lien 3</a>
</body>
</html>




Là où ça se corse c’est que les images ouvertes doivent comporter des zones réactives, qui ne sont pas au même endroit sur chaque image (ça serait trop simple). Je pensais m’en tirer en créant divers <MAP> qui seraient appelés en même temps que l’image concernée lors du click sur le lien. Voici donc ce que j’avais fait :


<html>
<head>
</head>
<body>

<IMG name="image" src="cabinet.jpg"  usemap="#initial"  border=0>


<map name="initial">
 <area shape="rect"  href="#" coords="100,0,125,25"  onclick="document.image.src='imagetest.jpg';   ">
</map>

<map name="img1">
 <area shape="rect"  href="#" coords="0,0,25,25"  onclick="document.image.src='image1bis.jpg';   ">
</map>
<map name="img2">
 <area shape="rect"  href="#" coords="175,0,200,25"  onclick="document.image.src='image2bis.jpg';   ">
</map>
<map name="img3">
 <area shape="rect"  href="#" coords="0,125,25,150"  onclick="document.image.src='image3bis.jpg';   ">
</map>

<a href=# onclick="document.image.src='image1.jpg'; document.image.usemap='#img1';">Lien 1</a>
<a href=# onclick="document.image.src='image2.jpg';
document.image.usemap='#img2'">Lien 2</a>
<a href=# onclick="document.image.src='image3.jpg'; document.image.usemap='#img3'">Lien 3</a>

</body>
</html>




Mais visiblement html ne l’entent pas de cette oreille car ça ne fonctionne pas… à l’ouverture des images 1,2et 3 la zone réactive reste celle définie initialement…
Quelqu'un aurait-il une idée qui m’éviterait de créer une page par image (j’ai pas mal de liens…)
Simple problème de « vocabulaire » ou impossible en html ?

Merci de votre aide.

A+
Philippe
Ce n'est pas tellement un problème de HTML. Ce serait plutôt un manque de la spécification HTML qui ne précise pas quelles actions entreprendre si l'attribut usemap est modifié dans le DOM. Du coup soit les navigateurs font ça à leur sauce, soit ils ne font rien...

Une solution serait peut-être de créer un nouvel élément IMG en remplacement de l'existant dans le DOM, plutôt que de remplacer l'attribut usemap d'un élément IMG existant.
Sujet clos
Aller à