Bonjour
Malgré les recherches sur le forum, je ne vois pas pourquoi l'infobulle reste toujours visible avec l'area appelant la fonction swapPic alors qu'elle fonctionne correctement avec l'area n'appelant pas la fonction swapPic.
Je suis novice et espère un solution de votre savoir
Merci de votre réponse
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
#info13, #info84 {
	position: absolute;
	width: 150px;
	top: 180px;
	left: 50%;
	margin-left: -175px;
	z-index: 1;
	color: #c8ddda;
	background-color: #36F;
	visibility:visible;
	visibility:hidden;
	border: solid 2px #222;
	filter: alpha(opacity=75);
	-moz-opacity: 0.75;
	opacity: 0.75;
	font-weight: bold;
	text-align: center;
 font-size: 
 font-family: Courier, "Courier New", monospace;
}
</style>
<script type="text/javascript">
var myareas=new Array();
myareas[0]=new Image()
myareas[0].src="ImgDep/0.png"
myareas[13]=new Image()
myareas[13].src="ImgDep/13.png"
myareas[84]=new Image()
myareas[84].src="ImgDep/84.png"
myareas['fra']=new Image()
myareas['fra'].src="ImgDep/fra.png"
 
function swapPic(zone,nr)
{
	    var pic=document.getElementById('hovered')
        pic.src=myareas[nr].src 
        zone.onmouseout=function(){pic.src=myareas['fra'].src
		                          }				  
}
 
function afficher(info)
{
        var tooltip = document.getElementById(info)
        tooltip.style.visibility = "visible"
        run= true
}
function masquer(info)
{
        var tooltip = document.getElementById(info)
        tooltip.style.visibility = "hidden"
        run= false
}
</script>
</head>
<body>
<div id="pic" style="height: auto; width: auto; background-image: url('ImgDep/fra.png') ; background-repeat: no-repeat"> <img src="ImgDep/fra.png" width="400" height="397" border="0"usemap="#hoveredMap" id="hovered" />
  <map name="hoveredMap">
    <area onMouseOver="swapPic(this,13); afficher('info13')" onMouseOut="masquer('info13')" shape="poly" coords="270,341,278,336,281,330,284,331,286,322,294,322,305,328,320,330,319,335,320,340,322,343,321,344,320,348,322,349,320,353,309,352,307,345,300,345,295,342,291,347,285,345" title="Bouche-du-Rhône">
    <area shape="poly" coords="288,321,290,319,290,315,286,314,287,308,284,304,289,303,289,306,295,307,301,303,302,308,308,308,312,311,312,319,315,319,315,324,319,326,319,329,307,329" title="Vaucluse" onMouseMove="afficher('info84')"  onMouseOut="masquer('info84')">
  </map>
  <div id="info13">
    <p>Demo</p>
  </div>
  <div id="info84">
    <p>Test</p>
  </div>
</div>
</body>
</html>