Discussion :

[DonKnacki]

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]

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]

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]

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)

[DonKnacki]

Code :

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

onmouseover = "move;..." ?

?

au début je ne l'appelais pas mais après conseil de E.Bzz j'ai fais ça oui
Je te met le message en question si tu as perdu une parti du thread

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+

[E.Bzz]

e.bzzz nop l'évènement n'est pas gèré par ie ,

Evidemment !
Dans la fonction que j'utilise (dans laquelle je n'ai pas supprimé la gestion des autres browsers qu'IE) je passe dans le cas

Code :

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

event.clientX+document.documentElement.scrollLeft;

Il faut que j'arrête de répondre quand j'ai pas le temps, Il faut que j'arrête de répondre quand j'ai pas le temps, Il faut que j'arrête de répondre quand j'ai pas le temps, Il faut que j'arrête .....

au début je ne l'appelais pas mais après conseil de E.Bzz j'ai fais ça oui

Via cette fonction ou un équivalent, il faut bien que tu détermines les coordonnées de ta bulle ...

Arf !

A+

[le_chomeur]

je sens qu'on va repartir a 0 ...


envois le code complet !!

^^

[E.Bzz]

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]

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]

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]

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";
}