Infobulle toujours visible malgré le onmouseout

**furtif13780** · 24/11/2012, 11h37

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>

**SylvainPV** · 24/11/2012, 13h43

Dans swappic :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**furtif13780** · 24/11/2012, 17h14

Merci sylvainPV la solution fonctionne parfaitement

Infobulle toujours visible malgré le onmouseout

JavaScript

Discussions similaires

Partager

Partager