bonjour j' ai un souci en javascript que j arrive pas recoudre.
j ai une map je dois la rendre cliquable et a chaque clic sur partie bien defini il y a un div dois f apparaître avec des infos .
qui aurais une solution a me proposer
merci d avance
j ai une map je dois la rendre cliquable et a chaque clic sur partie bien defini il y a un div dois f apparaître avec des infos .
<script>
function affiche(id){
document.getElementById('Div1').style.display='block';
}
function cache(id){
document.getElementById('Div1').style.display='none';
}
</script><div class="container">
<div class="col-md-9">
<div id="map">
<img src="https://diocese92.fr/IMG/png/les-aumoneries-d_hopitaux.png" alt="guide_formation_17/18" usemap="#image_map" />
<map name="image_map">
<area id="" alt="" title="Hopital" href="" coords="283,217 336,163 339,174 362,163 398,177 400,201 391,213 379,222 368,229 306,261 294,244 294,244 284,229 284,229 285,218 285,218 284,218 336,162 336,162 338,161 338,160" shape="polygon" onclick="affiche('Div1')" >
<area target="" alt="" title="villeneuve - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, sequi." href="#affhop75002" coords="485,126,483,159,508,210,525,204,536,175,533,154,522,135,490,120" shape="poly">
<area target="" alt="Hopital" title="Hopital" href="" coords="431,279,459,306,500,285,501,268,491,250,475,248,443,260" shape="poly">
<area target="" alt="" title="" href="" coords="416,330,396,366,358,361,350,344,381,298" shape="poly">
<area target="" alt="" title="" href="" coords="351,333,312,309,305,281,334,270,340,275,371,261,378,274,401,258,415,268,381,295" shape="poly">
<area target="" alt="hopital" title="hopital" href="" coords="295,351,312,360,309,376,322,386,345,375,352,339,329,324,313,309,304,329" shape="poly">
<area target="" alt="hopital" title="hopital" href="" coords="313,386,310,374,317,363,293,351,273,372,258,393,254,407,248,412,238,402,231,418,243,429,267,427,285,429,308,397" shape="poly">
<area target="" alt="hopital" title="hopital" href="" coords="230,446,256,459,239,475,237,489,206,502,201,515,188,521,200,536,239,529,258,531,282,529,291,497,288,432,269,428,246,427,237,435" shape="poly">
<area target="" alt="" title="" href="" coords="142,420,170,478,198,464,216,455,229,446,241,426,211,397,192,374,155,374,139,395" shape="poly">
<area target="" alt="hopital" title="hopital" href="" coords="199,464,191,485,164,503,196,503,220,497,237,492,236,476,254,458,226,443,225,455,209,458" shape="poly">
<area target="" alt="hopital" title="hopital" href="" coords="293,453,300,505,315,542,351,539,365,522,369,511,356,498,352,481,336,468,326,455,311,453" shape="poly">
<area target="" alt="hopital" title="hopital" href="" coords="243,531,242,551,236,556,238,565,245,573,256,593,291,580,286,571,309,544,292,499,285,528,268,532" shape="poly">
<area target="" alt="hopital" title="hopital" href="" coords="329,556,341,562,359,572,373,578,384,585,403,582,413,574,422,562,421,544,431,533,414,523,400,535,394,527,379,515,367,535,362,544" shape="poly">
<area target="" alt="hopital" title="hopital" href="" coords="363,579,386,587,411,588,411,608,408,629,400,651,392,661,364,675,348,692,342,706,321,715,305,694,326,675,328,646,339,622,349,615,364,596" shape="poly">
<area target="" alt="hopital" title="hopital" href="" coords="323,715,343,723,365,719,401,709,412,688,424,673,407,670,404,659,387,667,375,673,359,683,349,697,345,704" shape="poly">
<area target="" alt="hopital" title="hopital" href="" coords="415,783,425,767,446,763,467,740,498,731,514,731,498,772,501,793,509,824,512,849,495,857,479,864,479,830,450,839,435,848,420,829,438,803" shape="poly">
</map>
</div>
</div>
<div class="col-md-3">
<div id="Div1" class="card text-white bg-primary mb-3" style="max-width: 18rem; display:none">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Affichage de ma div 1</p>
</div>
</div>
</div>qui aurais une solution a me proposer
merci d avance