Infobulle sur une image

**DonKnacki** · 21/04/2009, 16h40

Bonjour à tous,
j'aimerai mettre en place un système d'infobulle sur une image
Pour cela j'ai découpé une zone cliquable sur mon image puis à l'aide de script trouvé sur le net, j'ai pu insérer une infobulle sur cette zone
Seulement le problème est que j'ai un lien dans cette infobulle mais il m'est impossible de cliquer dessus

Si vous pouviez m'aider à résoudre ce problème

script javascript :

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
function GetId(id)
{
	return document.getElementById(id);
}
var i=false; // La variable i nous dit si la bulle est visible ou non
 
function move(e)
{
	if(i) // Si la bulle est visible, on calcul en temps reel sa position ideale
	{	 
		if (navigator.appName!="Microsoft Internet Explorer") // Si on est pas sous IE
		{ 
			GetId("curseur").style.left=e.pageX + 5+"px";
			GetId("curseur").style.top=e.pageY + 10+"px";
		}
		else 
		{ 
			if(document.documentElement.clientWidth>0) 
			{
				GetId("curseur").style.left=20+event.x+document.documentElement.scrollLeft+"px";
				GetId("curseur").style.top=10+event.y+document.documentElement.scrollTop+"px";
			}
			else
			{
				GetId("curseur").style.left=20+event.x+document.body.scrollLeft+"px";
				GetId("curseur").style.top=10+event.y+document.body.scrollTop+"px";
			}
		}
	}
}
 
function montre(text)
{
	if(i==false) 
	{
	  GetId("curseur").style.visibility="visible"; // Si il est cacher (la verif n'est qu'une securité) on le rend visible.
	  GetId("curseur").innerHTML = text; // on copie notre texte dans l'élément html
	  i=true;
	}
}
 
function cache()
{
	if(i==true)
	{
		GetId("curseur").style.visibility="hidden"; // Si la bulle est visible on la cache
		i=false;
	}
}
document.onmousemove=move; // des que la souris bouge, on appelle la fonction move pour mettre à  jour la position de la bulle.

script css

Code :

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

1
2
3
4
5
6
7
8
9
10
.infobulle
{
	position: absolute;   
	visibility : hidden;
	border: 1px solid Black;
	padding: 10px;
	font-family: Verdana, Arial;
	font-size: 10px;
	background-color: #FFFFCC;
}

script html

Code :

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

1
2
3
4
5
6
7
8
<IMG NAME="projet6400" SRC="projet640.png" WIDTH="640" HEIGHT="394" BORDER="0" USEMAP="#projet640"/>
<MAP NAME="projet640">
<AREA SHAPE="rect" COORDS="5,0,148,60" HREF="www/doc/doc1.ppt" TARGET="_self" ALT="Doc1"  onmouseover="montre('un peu de texte, <a href=\'www.google.fr\'>lien</b> !');" onmouseout="cache();">
</MAP>
<div id="curseur" class="infobulle">
</div>
</BODY>
</HTML>

**DonKnacki** · 22/04/2009, 09h41

Bonjour à tous
j'ai pensé ajouté une temporisation afin de pouvoir cliquer sur le lien et ça fonctionne seulement l'infobulle n'apparait plus au bonne endroit (car j'ai été obligé de décommenter l'appel à la fonction move)

voici donc le nouveau code :

script javascript :

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
function GetId(id)
{
	return document.getElementById(id);
}
var i=false; 
 
function montre(text)
{
	if(i==false) 
	{
	  GetId("curseur").style.visibility="visible"; 
	  GetId("curseur").innerHTML = text; 
	  i=true;
	}
}
 
function cache()
{
	if(i==true)
	{
		GetId("curseur").style.visibility="hidden"; 
		i=false;
	}
}
 
function tempo()
{
	setTimeout("cache()",5000);
}

script html

Code :

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

1
2
3
4
5
6
7
8
<IMG NAME="projet6400" SRC="projet640.png" WIDTH="640" HEIGHT="394" BORDER="0" USEMAP="#projet640"/>
<MAP NAME="projet640">
<AREA SHAPE="rect" COORDS="5,0,148,60" HREF="www/doc/doc1.ppt" TARGET="_self" ALT="Doc1"  onmouseover="montre('un peu de texte, <a href=\'www.google.fr\'>lien</b> !');" onmouseout="tempo();">
</MAP>
<div id="curseur" class="infobulle">
</div>
</BODY>
</HTML>

**E.Bzz** · 22/04/2009, 11h04

Re-bonjour,
effectivement, la tempo peut poser problème.
Mais si tu dois intervenir dans la bulle, il ne faut plus qu'elle se déplace une fois affichée.
Essaye d'enlever

Code :

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

document.onmousemove=move;

et de n'appeler la fonction move() qu'au moment de l'affichage (dans le AREA) :

Code :

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

onmouseover="move();montre('un peu de texte......');"

A+

**DonKnacki** · 22/04/2009, 11h22

Re-bonjour
Hélas, cela ne résous pas le problème, l'infobulle ne s'affiche toujours pas au bon endroit (j'ai essayé sur IE et firefox et même constat)

**E.Bzz** · 22/04/2009, 11h33

Envoyé par Nom

j'ai pensé ajouté une temporisation afin de pouvoir cliquer sur le lien et ça fonctionne seulement l'infobulle n'apparait plus au bonne endroit (car j'ai été obligé de décommenter l'appel à la fonction move)

Ma proposition était sous-entendue "avant la modification concernant la tempo"

Marche toujours pas ?

EDIT : Arf !
Du coup, faut enlever le test

Code :

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

1
2
	if(i) // Si la bulle est visible, on calcul en temps reel sa position ideale
	{

puisque move() n'est appelé que quand la bulle va être affichée (et non plus à chaque mouvement de souris), mais par contre, elle est toujours masquée à cet instant ...

A+

**DonKnacki** · 22/04/2009, 12h08

Excuse moi je n'avais pas vu qu'il y avait une erreur javascript avec l'utilisation de move comme tu l'avais suggéré

Code :

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

1
2
 
onmouseover="move();montre('un peu de texte......');"

En effet en l'utilisant ainsi il manque un paramètre à la fonction move

Code :

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

function move(e)

par contre je ne sais pas trop quoi mettre ?

**E.Bzz** · 22/04/2009, 12h20

Envoyé par Nom

par contre je ne sais pas trop quoi mettre ?

Enlève le paramètre de la déclaration de la fonction.
"e" représente implicitement l'évènement ayant déclenché l'appel.

A+

**DonKnacki** · 22/04/2009, 12h29

Oui j'avais essayé

Ça fonctionne sur IE mais sur Firefox en revanche l'infobulle n'apparait même plus
Et forcément j'ai l'erreur de javascript indiqué précédemment puisque e n'est pas défini dans cette parti de code

Code :

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

1
2
3
4
5
if (navigator.appName!="Microsoft Internet Explorer") // Si on est pas sous IE
{ 
    GetId("curseur").style.left=e.pageX + 5+"px";
    GetId("curseur").style.top=e.pageY + 10+"px";
}

**E.Bzz** · 22/04/2009, 12h41

Pour les autres nav tu peux remplacer e.pageX par

Code :

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

event.clientX+document.documentElement.scrollLeft;

et e.pageY par

Code :

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

event.clientY+document.documentElement.scrollTop;

(ceci dit je ne développe que "pour" IE

)

A+

**DonKnacki** · 22/04/2009, 13h48

Cette fois, il m'indique que la variable event n'est pas défini

**le_chomeur** · 22/04/2009, 14h17

sous ie il faut recréer l'évènement

Code :

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

1
2
3
 
// compatibilité ie ( e = event ! )
          if (!e) var e = window.event;

**DonKnacki** · 22/04/2009, 14h31

Bonjour le_chomeur et merci de te joindre à nous pour tenter de résoudre mon problème

alors si je comprend bien, tu m'indique de remettre e.pageX et e.pageY
ce que j'ai fait :

Code :

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

1
2
3
4
5
6
if (navigator.appName!="Microsoft Internet Explorer") // Si on est pas sous IE
{ 
	var e = window.event;
	GetId("curseur").style.left=e.pageX + 5+"px";
	GetId("curseur").style.top=e.pageY + 10+"px";
}

et chose étrange, la toolbar de webdevelopeur continue à me dire que e n'est pas définie

EDIT: en te relisant, je commence à penser que j'ai mal compris

**le_chomeur** · 22/04/2009, 14h39

et comme ça ?

Code :

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

1
2
3
4
5
6
7
8
function move(e){
if (navigator.appName!="Microsoft Internet Explorer") // Si on est pas sous IE
{ 
	e = window.event;
}
	GetId("curseur").style.left=e.pageX + 5+"px";
	GetId("curseur").style.top=e.pageY + 10+"px";
}

**DonKnacki** · 22/04/2009, 14h48

c'est pire

Sur Firefox toujours e indéfini et sur IE une erreur javascript aussi mais j'ignore comment les voir
Du coup mon infobulle ne s'affiche sur aucun des 2 navigateurs

**E.Bzz** · 22/04/2009, 14h51

Heu ... 2 trucs au cas où :

on est là dans le passage != IE
pense à virer l'accolade en trop

A+

**le_chomeur** · 22/04/2009, 14h51

tu peux me montrer comment tu l'appel ?

**DonKnacki** · 22/04/2009, 15h04

Envoyé par E.Bzz

Heu ... 2 trucs au cas où :

on est là dans le passage != IE
pense à virer l'accolade en trop

A+

Oui moi aussi ça m'a surpris
D'après le code donné par le_chomeur, j'avais compris qu'il fallait largement réduire la fonction move
et donc l'accolade ne serait pas en trop

Envoyé par le_chomeur

tu peux me montrer comment tu l'appel ?

oui bien sur, je l'appel comme ceci :

Code :

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

onmouseover="move();montre('un peu de texte, <a href=\'http://www.google.fr\'>lien</b> !'); " onmouseout="tempo();">

comme me l'avais conseillé E.Bzz

**le_chomeur** · 22/04/2009, 15h17

Code :

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

onmouseover = "move;..." ?

?

**E.Bzz** · 22/04/2009, 15h24

Pour info (car pas bien le temps de suivre le thread

), j'utilise une fonction équivalente dans laquelle je ne passe pas l'évènement en paramètre, et le "e" est pourtant reconnu ...
Sous IE 6 (

)

A+

**le_chomeur** · 22/04/2009, 15h26

e.bzzz nop l'évènement n'est pas gèré par ie , ou alors je veux bien voir ton code , cf : mon truc de drag and drop dans les contributions

Infobulle sur une image

JavaScript

Discussions similaires

Partager

Partager