Rollover image map

Hello,

j'ai créé une image cliquable qui a pour code :

<img src="/IMG/jpg/europe_couleur2.jpg" width="789" height="610" border="0" style="overflow: auto; height:auto; max-width:100%;" usemap="#map"  alt="Carte interactive de l'Europe"/>

<map id= "map" name="map">

<area shape="poly" coords="250,297,258,297,258,296,260,296,259,292,260,292,260,287,262,286,261,284,263,284,266,281,268,278,270,278,274,274,273,272,270,269,270,267,274,260,272,260,272,258,276,254,275,254,275,252,274,251,270,251,269,252,267,254,266,255,266,257,264,257,264,260,256,259,256,262,253,262,252,263,252,267,250,267,250,272,249,272,248,276,248,277,247,280,247,281,247,283,246,283,246,285,248,285,248,287,251,286,251,297" alt="Danemark"  href="a.html" />
<area shape="poly" coords="119,87,108,95,104,93,100,91,96,91,96,93,92,92,86,92,84,91,81,91,78,90,73,90,69,83,67,80,66,77,61,72,55,72,55,67,59,63,60,64,64,64,64,60,66,59,66,56,58,56,62,49,65,50,70,52,72,48,75,46,72,43,68,43,65,41,66,37,70,36,73,34,75,34,78,37,79,33,80,30,84,32,85,36,86,41,86,45,83,49,83,52,89,51,93,46,94,47,97,52,100,50,105,53,109,54,109,57,114,56,115,57,118,57,119,53,123,53,125,59,129,64,125,65,126,71,129,71,129,77,127,79,126,80,125,86,123,89,119,87,108,94" alt="Islande"   nohref="b.html" />
<area shape="poly" coords="15,530,18,525,21,525,24,523,24,519,29,516,25,513,31,504,32,499,31,492,37,492,39,489,41,486,41,481,46,477,51,477,51,467,48,463,41,464,39,465,39,462,37,459,34,458,32,456,31,454,28,452,22,452,21,461,19,466,19,474,16,478,13,481,11,482,7,484,6,487,4,489,3,492,2,492,2,495,4,498,5,503,5,508,4,509,3,515,1,519,1,526,4,526,7,529,16,529" alt="Portugal"  href="c.html" />
<area shape="poly" coords="592,489,594,485,592,481,580,466,580,465,576,463,571,463,572,459,575,459,576,460,587,460,591,461,599,461,602,464,608,464,611,465,623,466,626,464,630,463,633,462,636,464,633,466,642,471,642,475,644,477,647,478,647,480,645,481,644,483,638,483,637,482,635,482,633,484,625,484,620,487,615,492,611,488,606,485,604,485,602,489,598,489,592,488" alt="Géorgie"   nohref="d.html" />

</map>

et j'aimerais qu'au survol de chaque zone une image apparaisse à l'endroit de la zone survolée.
J'ai fais de nombreuses recherches sur Internet mais je n'ai rien trouvé, donc j'espère que vous pourrez m'aider

Bonjour,

Il faut faire un rollover en Javascript. On en trouve de nombreux exemples en ligne.

Au survol de chaque area, il faut modifier l'attribut src de l'image pour la remplacer par l'image avec l'état survolé. Petit problème: si ton image Map fait 600x400px et que tu as 20 zones réactives, il te faut 21 images complètes de 600px sur 400px, ce qui est un peu lourd...

Tu peux éventuellement ne pas passer par une image map, et faire une simili-image map avec de simples liens et des styles CSS qui vont bien. C'est moins bien pour l'accessibilité, mais ça peut être fait à peu près correctement tout de même.

Au final, ça dépend de ce que tu veux faire exactement (design des zones réactives, nombre de zones en tout, etc.).

T'aurais un petit exemple concernant la modification du src?