Creation d'un cadavre exquis avec usemap

Bonjour,


Je dois réaliser pour un projet de page un cadavre exquis : je m'explique

affichage d'une image (img1.jpg de 600X800) avec 5 zones MAP différentes,

A chaque fois que l'on passe sur une zone :

1/ je dois afficher un texte à côté de l'image
mais en même temps,
2/ je dois changer l'image de base par une autre. (img2, img3,img4,img5)

cela creer un espece de cadavre exquis

j'espère être assez clair.

mon code fonctionne a ceci près qu'il faut que je passe sur l'ensemble de l'image avant que cela fonctionne correctement ???

De l'aide SVP et merci de vos réponse

Cordialement,

Voici mon code simple :


<div id="content" style="position:relative";>

<div id="texte" style="height:505px;">
<div id="imgbase" style="float:left; z-index:1;position:absolute">
<img src="images/img1.jpg" usemap="#map"/>
</div>

<div id="remp1" style="float:left;z-index:2;position:absolute">
<img src="images/img2.jpg" usemap="#map"/>
</div>

<div id="remp2" style="float:left;z-index:2;position:absolute">
<img src="images/img3.jpg" usemap="#map"/>
</div>

<div id="remp3" style="float:left;z-index:2;position:absolute">
<img src="images/img4.jpg" usemap="#map"/>
</div>

<div id="remp4" style="float:left;z-index:2;position:absolute">
<img src="images/img5.jpg" usemap="#map"/>
</div>

<div id="remp5" style="width:400px;float:left;z-index:2;position:absolute">
<img src="images/img1.jpg" usemap="#map"/>
</div>

<map name="map">

<area shape="rect" coords="0,0,595,171" onmouseover="document.getElementById('image1').style.display='block';document.getElementById('remp1').style.display='block'" onmouseout="document.getElementById('image1').style.display='none';document.getElementById('remp1').style.display='none'" href="#">

<area shape="rect" coords="0,170,595,341" onmouseover="document.getElementById('image2').style.display='block';document.getElementById('remp2').style.display='block'" onmouseout="document.getElementById('image2').style.display='none';document.getElementById('remp2').style.display='none'" href="#">

<area shape="rect" coords="0,339,595,510" onmouseover="document.getElementById('image3').style.display='block';document.getElementById('remp3').style.display='block'" onmouseout="document.getElementById('image3').style.display='none';document.getElementById('remp3').style.display='none'" href="#">

<area shape="rect" coords="0,510,595,681" onmouseover="document.getElementById('image4').style.display='block';document.getElementById('remp4').style.display='block'" onmouseout="document.getElementById('image4').style.display='none';document.getElementById('remp4').style.display='none'" href="#">

<area shape="rect" coords="0,678,595,795" onmouseover="document.getElementById('image5').style.display='block';document.getElementById('remp5').style.display='block'" onmouseout="document.getElementById('image5').style.display='none';document.getElementById('remp5').style.display='none'" href="#">
</map>

</div>



<div style="position:absolute;width:200px;height:600px;left:405">


<div id="image1" style="position:absolute;width:200px; height:600px;left:405;z-index=1">
<ul>
<b>Texte 1</b>
</ul>
</div>

<div id="image2" style="position:absolute;width:200px; height:600px;left:405;z-index=2">
<ul>
<b>Texte 2</b>
</ul>
</div>

<div id="image3" style="position:absolute;width:200px; height:600px;left:405;z-index=2">
<ul>
<b>Texte 3</b>
</ul>
</div>

<div id="image4" style="position:absolute;width:200px; height:600px;left:405;z-index=2">
<ul>
<b>Texte 4</b>
</ul>
</div>

<div id="image5" style="position:absolute;width:200px; height:600px;left:405;z-index=2">
<ul>
<b>Texte 5</b>
</ul>
</div>

</div>
</div>