Résolu Carte cliquable et pop up

Bonjour,

Voilà, j'espère que je ne me suis pas trompé d'endroit.

J'ai une carte de France des département et je souhaiterais rendre cette carte cliquable. C'est à dire qu'à chaque fois que je cliquerais sur un département il me retournerait dans un pop up ou une image les renseignements que j'aurai donnée. Je souhaite faire ça car le clique normal sur le département efface la carte pour me retourner les renseignements et je ne tiens pas à ce que la carte disparaisse durant la consultation du document pop up.

J'espère que je n'ai pas été trop confus dans mes explication et je vous remercie de votre aide.

@lain

Une petite avancée sur ce sujet (pour moi surtout)

Bonjour, et désolé pour la taille de caractères, le texte a été préparé sur un article.

J'ai réutilisé cette image cliquable et le "code map" conservé d'un précédent sujet comme point de départ (pas retrouvé sur le forum)

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. 

▄ Rappel:  Principe du code créé avec Gimp pour la carte cliquable

<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   (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 l'image plein écran 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 l'image plein écran suite clic sur seine-maritime" />
</map>

 ► voir le CODE UTILISÉ  (pour faire un essai éventuel) 

Ce n'est pas encore le pop-up souhaité suite à un clic, mais peut être que ça peut être utile.

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

Bonjour et merci Stormalo

Je n'ai pas pu revenir avant mais je vois que tu as trouvé une solution. J'ai à quelques différences près la même, et tout fonctionne correctement.

Je remercie aussi au passage Papasti et Thierry pour leur conseils éclairés, et les tiens aussi d'ailleurs.

Tu as eu raison de clore le sujet.

@lain

Bonsoir Ptit Randonneur,

Un mot pour signaler que je n'ai pas clos le sujet.

A ma connaissance seul l'auteur du sujet ou un membre du staff peut le faire, et je n'ai aucun lien avec l'équipe qui dirige Eklablog,

Si ce n'est pas toi, c'est très certainement un membre du staff qui est à l'origine du marquage "Résolu"

Edit: peut être après avoir constaté que tu avais réalisé ton objectif.