Image map test 1

-----

Rando 77 - Test pour répondre au sujet:
http://doc.eklablog.com/carte-cliquable-et-pop-up-topic123082

J'ai réutilisé cette image et le "code map" conservé d'un précédent sujet comme point de départ

En conservant une partie du "découpage" (Manche et Seine-Maritime) j'ai adapté le code créé par Gimp pour faire apparaitre une image au survol et une autre en plein écran suite à un clic.
(ne suis pas arrivé à le faire en pop-up )

▄ Rappel:  Code créé pour la carte cliquable (annoté ci-dessous pour lisibilité):

<img src="ici l'adresse de l'image cliquable" width="350" height="272" border="0" usemap="#map1" />
 

<map name="map1">
<area shape="poly" coords="série de chiffre définissant le contour MANCHE"
href="ici l'adresse de la cible suite clic  sur manche" />

<area shape="poly" coords="série de chiffre définissant le contour SEINE-MARTIME"
href="ici l'adresse de la cible suite clic sur seine-maritime" />
</map>

▄ Modification du code pour affichage d'une image-info au survol + une autre en réponse à un clic:
(nécessite JavaScript activé)

<img idid="test_rando" usemap="#map2" src="ici l'adresse de l'image cliquable" border="0" alt="" width="350" height="272" />

<map name="map2">
<area onmouseover="$('test_rando').src='ici l'adresse image survol de  manche' " onmouseout="$('test_rando').src='ici l'adresse de l'image cliquable' "
shape="poly" coords="série de chiffre définissant le contour MANCHE"
href="ici l'adresse de la cible suite clic  sur manche" />

<area onmouseover="$('test_rando').src='ici l'adresse image survol de Seine-Maritime'" onmouseout="$('test_rando').src='ici l'adresse de l'image cliquable' "
shape="poly" "série de chiffre définissant le contour SEINE-MARTIME"
href="ici l'adresse de la cible suite clic sur seine-maritime" />
</map>

 Télécharger le code utilisé pour voir le  résultat dans un article brouillon

Merci à papasti et -thierry- pour avoir signalé l'utilisation du $ dans JavaScript sur Eklablog.
Grand raccourci d'écriture !