Infobulle sur une image

Version imprimable

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:

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:

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:

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>

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:

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:

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>

22/04/2009, 11h04
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:

document.onmousemove=move;

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

Code:

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

A+
22/04/2009, 11h22
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)
22/04/2009, 11h33
E.Bzz
Citation:

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 ? :koi:

EDIT : Arf !
Du coup, faut enlever le test
Code:

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+
22/04/2009, 12h08
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:

1 2 onmouseover="move();montre('un peu de texte......');"
En effet en l'utilisant ainsi il manque un paramètre à la fonction move

Code:

function move(e)

par contre je ne sais pas trop quoi mettre ?
22/04/2009, 12h20
E.Bzz

Citation:

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+
22/04/2009, 12h29
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:

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"; }
22/04/2009, 12h41
E.Bzz

Pour les autres nav tu peux remplacer e.pageX par

Code:

event.clientX+document.documentElement.scrollLeft;

et e.pageY par

Code:

event.clientY+document.documentElement.scrollTop;

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

A+
22/04/2009, 13h48
DonKnacki

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

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

Code:

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

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:

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 8O

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

et comme ça ?

Code:

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

22/04/2009, 14h48
DonKnacki

c'est pire :aie:
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
22/04/2009, 14h51
E.Bzz
Heu ... 2 trucs au cas où :
- on est là dans le passage != IE
- pense à virer l'accolade en trop ;)
A+
22/04/2009, 14h51
le_chomeur

tu peux me montrer comment tu l'appel ?
22/04/2009, 15h04
DonKnacki
Citation:
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

Citation:

Envoyé par le_chomeur

tu peux me montrer comment tu l'appel ?

oui bien sur, je l'appel comme ceci :

Code:

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

comme me l'avais conseillé E.Bzz
22/04/2009, 15h17
le_chomeur

Code:

onmouseover = "move;..." ?

?
22/04/2009, 15h24
E.Bzz

Pour info (car pas bien le temps de suivre le thread :oops:), 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 (:aie:)

A+
22/04/2009, 15h26
le_chomeur

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 ;)
22/04/2009, 15h36
DonKnacki

Citation:

Code:

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

Citation:

Envoyé par 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:

document.onmousemove=move;

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

Code:

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

A+
22/04/2009, 15h51
E.Bzz

Citation:

Envoyé par le_chomeur

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:

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

Citation:

Envoyé par Nom

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+
22/04/2009, 15h56
le_chomeur

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

envois le code complet !!

^^

Effectivement c'est surement mieux :P

Alors à l'heure actuelle j'ai 3 fichiers :

fichier js :

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
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
function GetId(id)
{
	return document.getElementById(id);
}
var i=false; // La variable i nous dit si la bulle est visible ou non
 
function move()
{
	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";
	}
        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ée) 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; // dès que la souris bouge, on appelle la fonction move pour mettre à  jour la position de la bulle.
function tempo()
{
	setTimeout(cache,5000);
}

fichier html

Code:

1
2
3
4
5
6
<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="move();montre('un peu de texte, <a href=\'www.google.fr\'>lien</b> !');" onmouseout="cache();">
</MAP>
<div id="curseur" class="infobulle">
</div>

fichier css

Code:

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

Voila l'ensemble
tu peux essayer de retirer le move() du html et de décommenter la ligne document.onmousemove=move du js

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
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		<style type="text/css">
			.infobulle
{
	position: absolute;   
	visibility : hidden;
	border: 1px solid Black;
	padding: 10px;
	font-family: Verdana, Arial;
	font-size: 10px;
	background-color: #FFFFCC;
}
		</style>
		<script type="text/javascript">
			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 (!e) // Si on est pas sous IE
	{	
		e = window.event;
	}
		GetId("curseur").style.left= (e.clientX + 5)+"px";
		GetId("curseur").style.top= (e.clientY + 10)+"px";
		GetId("testtt").innerHTML = e.clientX + "px";
 
}
 
 
function montre(text)
{
	if(i==false) 
	{
	  GetId("curseur").style.visibility="visible"; // Si il est cacher (la verif n'est qu'une securitée) 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; // dès que la souris bouge, on appelle la fonction move pour mettre à  jour la position de la bulle.
function tempo()
{
	setTimeout(cache,5000);
}
		</script>
	</head>
	<body>
 
<div id="testtt" style="width:400px;height:400px;border:1px solid red" onmouseover="montre('un peu de texte, <a href=\'www.google.fr\'>lien</b> !');" onmouseout="cache();"></div>		
 
<div id="curseur" class="infobulle">
</div>
 
	</body>
</html>

a peu près ^^

22/04/2009, 16h41
DonKnacki

Merci pour ce code, le problème c'est qu'on retombe dans mon tout premier problème à savoir que je ne pas cliquer sur le lien qui se situe dans l'infobulle car celle ci reste coller à mon pointeur de souris
22/04/2009, 16h43
le_chomeur

ha ben voila ^^
une tempo ou passer par un click ...
un click affiche, un click masque :)
22/04/2009, 16h47
DonKnacki

Je vais être chi**
le clic est déjà pris :oops: en effet cliquer sur ces zones permet de télécharger un fichier
22/04/2009, 16h49
le_chomeur

alors une tempo :)

on mouse OVER , placer l'élément , le laisser afficher genre 2 secondes au mouseout ou viré si over sur un autre ... :)

Bon voyons ça :
- on mouse OVER => ça c'est dans le html

- Placer l'élément : c'est cette partie non ?
Code:

1 2 3 4 GetId("curseur").style.left= (e.clientX + 5)+"px"; GetId("curseur").style.top= (e.clientY + 10)+"px"; GetId("testtt").innerHTML = e.clientX + "px";
- Le laisser afficher genre 2 secondes au mouseout:
J'ai modifier la fonction montre ...
Code:

1 2 3 4 5 6 7 8 9 10 function montre(text) { if(i==false) { GetId("curseur").style.visibility="visible"; // Si il est cacher (la verif n'est qu'une securitée) on le rend visible. GetId("curseur").innerHTML = text; // on copie notre texte dans l'élément html i=true; } tempo(); //tempo permet de faire la temporisation puis de cacher la bulle }
- Ou viré si over sur un autre ...
euh ... je ne sais pas trop ce qu'il faut faire là :oops:

23/04/2009, 16h08
le_chomeur

si tu arrive sur une autre image, le repositionné par rapport a cette nouvelle image en fait et relancé le timer ;)
23/04/2009, 16h38
DonKnacki

Je n'ai qu'une image qui est découper en plusieurs zone en fait mais je suppose que c'est le même raisonnement
Ce que je ne sais pas c'est comment détecter qu'on arrive sur une autre zone ?
23/04/2009, 17h10
E.Bzz

Citation:

Envoyé par Nom

Ce que je ne sais pas c'est comment détecter qu'on arrive sur une autre zone ?

onmouseout / onmouseover

A+