Area - onClick - Infobulle

Version imprimable

Bonjour à tous,

Je sollicite le forum car je suis bloqué sur un problème depuis 2 jours... :cry:
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:

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:

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...:aie:
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 !!!:P

Code:

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

...

14/12/2010, 22h12
manouloute
Citation:
Envoyé par SpaceFrog

Code:

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 ?
15/12/2010, 08h28
SpaceFrog

ton popup à un zindex ?

sinon pour le event :

Code:

event = event?event:window.event;

Citation:

Envoyé par SpaceFrog

ton popup à un zindex ?

sinon pour le event :

Code:

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:

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:

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...

15/12/2010, 14h48
Bovino
Tu confonds une variable non définie et une variable non initialisée ;)
Code:

1 2 3 alert (variable) // Erreur ! var variable2; alert(variable2) // => undefined
15/12/2010, 14h49
manouloute
Citation:
Envoyé par Bovino

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

Code:

1 2 3 alert (variable) // Erreur ! var variable2; alert(variable2) // => undefined
ça veut dire qu'il faut que je fasse un :
Code:

1 2 var event;
au début de ma fonction ?
15/12/2010, 15h03
Bovino

Code:

event = event?event:window.event;

Dans cette ligne, le event, il sort d'où ?
15/12/2010, 15h04
manouloute

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

Code:

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 ?

le problement vient de l'evenement

pour la fonction il faut faire ceci

Code:

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:

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