Infobulle toujours visible malgré le onmouseout

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:

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>

Dans swappic :

Code:

zone.onmouseout=function(){pic.src=myareas['fra'].src; }

Tu écrases le onMouseout de ton area, donc le reste de l'appel. Essaie d'utiliser addEventListener("mouseout",fn) plutôt que onMouseout = fn, comme ça tu pourras ajouter plusieurs listeners sur le même élément et évènement.

Merci sylvainPV la solution fonctionne parfaitement