Images qui changent sur zones cliquables d'une image [Résolu]

[CrasherSEP]

Bonjour,

J'ai la photo d'une maison, j'aimerais qu'au passage de la souris sur les différentes pièces/parties, cela change l'image de la pièce en question...

Il est très facile de le faire en utilisant des tableaux avec les différentes parties de la maison... style :

Code :

<p><a title="Jeux du pendu" onmouseover="document.photo.src='chateauporte.jpg'" onmouseout="document.photo.src='chateau.jpg'" href="/page/le-pendu.html"><img style="display: block; margin-left: auto; margin-right: auto;" src="chateau.jpg" alt="" name="photo" /></a></p>

Mais toutes les parties n'étant pas forcement droite, cela pose problèmes...

Donc, je me tourne vers les zones cliquables, exemple :

Code :

1
2
3
4
5
6
7
8
<div align="center">
  <p><img src="chateau.jpg" width="461" height="549" border="0" usemap="#Map" />
      <map name="Map" id="Map">
        <area shape="poly" coords="79,230,163,218,118,113,75,197,78,231" href="#" />
      <area shape="poly" coords="160,466,201,471,209,408,197,387,183,387,172,394,163,424,160,448" href="#" />
    </map>
  </p>
</div>

Mais, je n'arrive pas à y mettre les 'onmouse'...

L'idée est de faire comme sur se site : http://bienvivrechezsoi.be/

Pouvez-vous m'aider ? Grand merci d'avance :-)

[CrasherSEP]

J'ai trouvé ceci :

Code :

1
2
3
4
5
6
7
8
<div align="center">
  <p><img name="porte" src="chateau.jpg" width="461" height="549" border="0" usemap="#Map" />
      <map name="Map" id="Map">
        <area shape="poly" coords="79,230,163,218,118,113,75,197,78,231" href="#" />
      <area shape="poly" coords="160,466,201,471,209,408,197,387,183,387,172,394,163,424,160,448" onmouseover="document.porte.src='chateauporte.jpg'" onmouseout="document.porte.src='chateau.jpg'" href="/page/le-pendu.html">
    </map>
  </p>
</div>

Il faut obligatoirement, donner un nom à l'image (name="porte") et ensuite : onmouseover="document.porte.src...

Voili voilo :-)