Bonsoir à tous,
Je dois créer une carte qui au clic de certaines régions laisse apparaître une div avec la possibilité de cliquez sur différents liens dans cette div afin de diriger le visiteur vers la bonne page.
J'essaye depuis plusieurs semaines de trouver un code javascript qui va bien.
Pour le moment j'ai réussi à afficher et cacher mes div lorsque je clique alternativement sur l'une ou l'autre des régions.
Le petit détail qui me manque c'est de pouvoir cacher ma div lorsque je re-clique sur la même zone.
Exemple :
- je clique sur la région aquitaine la div correspondant à l'aquitaine s'affiche.
- je re-clique sur la région aquitaine, la div se cache.
Si quelqu'un pouvait m'aider il me serait d'un grand secours.
Merci d'avance.
Mon code html :
Mon JavaScript :
Mon CSS :
Je dois créer une carte qui au clic de certaines régions laisse apparaître une div avec la possibilité de cliquez sur différents liens dans cette div afin de diriger le visiteur vers la bonne page.
J'essaye depuis plusieurs semaines de trouver un code javascript qui va bien.
Pour le moment j'ai réussi à afficher et cacher mes div lorsque je clique alternativement sur l'une ou l'autre des régions.
Le petit détail qui me manque c'est de pouvoir cacher ma div lorsque je re-clique sur la même zone.
Exemple :
- je clique sur la région aquitaine la div correspondant à l'aquitaine s'affiche.
- je re-clique sur la région aquitaine, la div se cache.
Si quelqu'un pouvait m'aider il me serait d'un grand secours.
Merci d'avance.
Mon code html :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Image mappée</title>
<script type="text/javascript">
//Mon JavaScript
</script>
</head>
<body>
<div id="pic" style="height: auto; width: auto; background-image: url('images/map.png'); background-repeat: no-repeat; position: relative;margin-left: 100px;">
<img id="hovered" src="images/transparent.png" usemap="#Map"/>
<map name="Map">
<area id="01" onmouseover="swapPic(this,1)" onclick="affichage('1')" shape="poly" coords="121,264,130,269,136,275,148,269,149,262,159,256,160,250,166,247,168,253,173,253,181,255,184,270,188,278,188,284,181,294,177,298,174,302,170,310,172,317,163,320,146,326,134,327,133,341,138,350,139,359,131,367,127,379,118,379,111,374,96,368,92,367,89,360,82,357,86,351,91,340,99,299,105,296,103,291,98,290,104,281,104,265,104,256,119,263" href="#">
<area onmouseover="swapPic(this,2)" onclick="affichage('2')" shape="poly" coords="120,262,113,253,105,248,106,239,110,230,106,224,109,216,115,216,122,217,127,214,123,202,119,191,118,186,125,185,130,182,138,183,146,182,154,184,158,190,164,192,172,195,173,203,174,208,181,212,181,217,178,220,170,225,171,232,173,237,170,241,165,246,160,249,160,257,149,262,149,269,136,274,126,267,119,261" href="#">
</map>
<div id="div1" style="top: 305px; left: 120px;">
<p>Choisissez une activité<br />
<a href="#">Frais</a><br />
<a href="#">Sec</a></p>
</div>
<div id="div2" style="top: 230px; left: 120px;">
<p>Choisissez une activité<br />
<a href="#">Frais</a><br />
<a href="#">Sec</a></p>
</div>
</div>
</body>
</html>Mon JavaScript :
//SURVOL ZONES REGIONS
//Préchargement des images
var myareas=new Array();
myareas[0]=new Image()
myareas[0].src="images/transparent.png"
myareas[1]=new Image()
myareas[1].src="images/01.png"
myareas[2]=new Image()
myareas[2].src="images/02.png"
myareas['bg']=new Image()
myareas['bg'].src="images/map.png"
//Fin préchargement des images
//Fonction affichage au survol
function swapPic(zone,nr){
var pic=document.getElementById('hovered')
pic.src=myareas[nr].src
zone.onmouseout=function(){pic.src=myareas['bg'].src}
}
//Fin fonction affichage au survol
//Fonction qui cache les div
function hideAll(){
var i=1;
while (document.getElementById("div" + i)){
document.getElementById("div" + i).style.display = "none";
i++;
}
}
//Fonction qui affiche les div
function affichage(divId){
hideAll();
if (document.getElementById("div" + divId)){
document.getElementById("div" + divId).style.display = "";
document.getElementById("div" + divId).style.visibility = "visible";
//document.getElementById("div" + divId).style.cssText='left: 10px; top: 10px;';
//document.getElementById("div" + divId).style.left= posx + "px";
//document.getElementById("div" + divId).style.top= posy + "px";
}
else {
document.getElementById("div" + divId).style.visibility="hidden";
}
}
Mon CSS :
#div1, #div2{
position: absolute;
z-index: 1;
color: #000;
background-color: #fff;
text-align: center;
font-family: verdana;
font-size: 10px;
padding: 15px 0px;
visibility: hidden;
width: 135px;
height: 43px;
background: url("images/tooltip.png") no-repeat;
}