OnMouseOver sur Image map

Bonjour !

Je me disais que ca faisiat longtemps que j'avais pas eu de souci...

Enfin, donc le truc, c'est d'avoir ça :

<map name="1">
<area shape="rect" coords="91,203,155,260" title="Bloc 1" />
<area shape="rect" coords="158,154,237,215" title="Bloc 2" />
<area shape="rect" coords="250,108,332,175" title="Bloc 3" />
<area shape="rect" coords="342,61,466,139" title="Bloc 4" />
</map>
<img src="grph.jpg" title="youhou" usemap="1" />

MAIS ! Je souhaiterai que les blocs 1-2-3-4 changent quand on passe la souris dessus... Si c'était un simple bouton, ça ne serai pas compliqué, mais vu que j'ai une imagemap...

Marchi !
Modifié par Stase (06 Feb 2008 - 15:16)

Au passage de la souris sur un area (qui devrait avoir un texte alternatif, d'ailleurs...), tu remplaces le src de l'image par une autre image, de préférence déjà en chache.

L'article est un peu vieux mais la méthode est décrite ici:
http://www.htmlgoodies.com/tutorials/image_maps/article.php/3479771

Petit problème: il te faut une image complète pour chaque état:
- normal (l'image de départ);
- premier area survolé;
- deuxième area survolé;
- etc.
Ça peut vite être très lourd.

Une solution peut-être moins lourde (en poids) consiste à ne pas utiliser d'image map, mais des liens avec images positionnés en CSS (et rollover en JS).
Modifié par Hermann (06 Feb 2008 - 17:11)