Discussion :

[manouloute]

Bonjour à tous,

Je sollicite le forum car je suis bloqué sur un problème depuis 2 jours...
J'ai développé une page contenant une image (map monde) rattachée à une map area avec l'attribut usemap.
Le principe est simple : lorsque je clique sur l'une des zones de l'image, une infobulle apparaît à côté de là où j'ai cliqué. Il faut donc que je récupère à chaque fois la position de la souris.
ça marche nickel sous IE, mais sous Firefox, ça marche pas.
Je sais que le problème vient de window.event qui n'est pas une variable globale sous FF mais je n'arrive pas à trouver une solution de contournement.


Voici mon code :
1er partie : la MAP

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
 
<map id="barclais-locations" name="barclais-locations">
<area href="javascript:afficher_popup('popup_nyc')" shape="circle" coords="198,89,30" />
<area href="javascript:afficher_popup('popup_miami',evt)" shape="circle" coords="159,141,33" />
<area href="javascript:afficher_popup('popup_sf',evt)" shape="circle" coords="14,73,30" />
<area href="javascript:afficher_popup('popup_la',evt)" shape="circle" coords="31,133,33" />
</map>
 
<img class="aligncenter size-full wp-image-240" usemap="#barclais-locations" src="locations-barclais1.png" width="869" height="157"/>
 
<div id="popup_nyc" style="display:none">
Popup NYC
</div>
 
<div id="popup_miami" style="display:none">
Popup MIAMI
</div>
 
<div id="popup_la" style="display:none">
Popup LA
</div>
 
<div id="popup_sf" style="display:none">
Popup SF
</div>

Ensuite le code javascript :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
function afficher_popup(id_popup)
{	
	var x = event.clientX;
	var y = event.clientY;
 
	popup = document.getElementById(id_popup);
	popup.style.display = "block";
	popup.style.position = "absolute";
	popup.style.left = x + "px";
	popup.style.top = y + 10 + "px";
}

Dès que j'essaie de passer en paramètre la variable "event", FF me dit qu'il ne connaît pas event...
Avez-vous une idée de comment je pourrais m'y prendre pour afficher ma popup à côté de la souris quand je clique ???

Merci d'avance pour votre aide !!!

[SpaceFrog]

Code :

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

1
2
 
<area href="#" onclick="afficher_popup('popup_nyc');return flase;" shape="circle" coords="198,89,30" />

...

[manouloute]

Code :

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

1
2
 
<area href="#" onclick="afficher_popup('popup_nyc');return flase;" shape="circle" coords="198,89,30" />

...

Merci pour la réponse.
J'ai fait la modification mais ça ne marche toujours pas. Je sais que le problème vient de la gestion de window.event sous Firefox.
event.clientX qui sert à détecter la position en X de la souris ne marche pas sous firefox.

Quelqu'un a-t-il une autre idée ?

[SpaceFrog]

ton popup à un zindex ?

sinon pour le event :

Code :

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

 event = event?event:window.event;

[manouloute]

ton popup à un zindex ?

sinon pour le event :

Code :

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

 event = event?event:window.event;

Merci SpaceFrog pour l'intérêt que tu portes à mon problème.
J'ai ajouté la ligne que tu m'as indiquée :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function afficher_popup(id_popup)
{	
	event = event?event:window.event;
	
	var x = event.clientX;
	var y = event.clientY;

	popup = document.getElementById(id_popup);
	popup.style.display = "block";
	popup.style.position = "absolute";
	popup.style.left = x + "px";
	popup.style.top = y + 10 + "px";
}

ça ne marche toujours pas. La console d'erreur de Firefox m'indique une erreur : "event is not defined" ce qui est bizarre étant donné que c'est justement le test que l'on souhaite faire, à savoir si la variable est définie ou pas...

Pour répondre à ta question sur le z-index, je l'ai mis :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
#popup_nyc, #popup_miami, #popup_la, #popup_sf {
position: absolute;
display:none;
width: 20em;
border:solid;
border-width:1px;
color:#000000;
background: #FFFFFF;
z-index: 500;
font-size: 10px;
margin: 10px;
text-align:center;
}

Mais je ne pense pas que ce soit ça puisque j'ai une erreur javascript qui stoppe l'exécution du script et que sur IE, ça marche...

Je ne sais pas quoi faire...

[Bovino]

Tu confonds une variable non définie et une variable non initialisée

Code :

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

1
2
3
alert (variable)    // Erreur !
var variable2;
alert(variable2)    // => undefined

[manouloute]

Tu confonds une variable non définie et une variable non initialisée

Code :

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

1
2
3
alert (variable)    // Erreur !
var variable2;
alert(variable2)    // => undefined

ça veut dire qu'il faut que je fasse un :

Code :

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

1
2
 
var event;

au début de ma fonction ?

[Bovino]

Code :

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

event = event?event:window.event;

Dans cette ligne, le event, il sort d'où ?

[manouloute]

Je vien de m'apercevoir d'un truc, c'est que la ligne :

Code :

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

event = event?event:window.event

ne sert à rien puisque event et window.event sont non définis (undefined).

Donc forcément, quand je veux les utiliser avec event.clientX, ça foire...

Comment puis-je faire pour récupérer la valeur du window.event dans ma fonction ?

[Invité]

le problement vient de l'evenement

pour la fonction il faut faire ceci

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function afficher_popup(id_popup,evt)
{	
	var dde=(navigator.vendor) ? document.body : document.documentElement;
	var s =(!s) ? window.event : evt;
	var x = s.clientX + dde.scrollLeft;
	var y = s.clientY + dde.scrollTop;
 
	popup = document.getElementById(id_popup);
	popup.style.display = "block";
	popup.style.position = "absolute";
	popup.style.left = x + "px";
	popup.style.top = y + 10 + "px";
}

et dans la page

Code :

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

<area onclick="afficher_popup('popup_miami',event)" shape="circle" coords="159,141,33" />