Images qui changent sur zones cliquables d'une image
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 :-)
