Infobulle sur une image

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

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

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 :

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** · 22/04/2009, 15h51

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 :

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

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+

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

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

envois le code complet !!

^^

**DonKnacki** · 22/04/2009, 16h15

Effectivement c'est surement mieux

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

fichier js :

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

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

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 :

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

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

**le_chomeur** · 22/04/2009, 16h34

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

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

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

**le_chomeur** · 22/04/2009, 16h43

ha ben voila ^^
une tempo ou passer par un click ...
un click affiche, un click masque

**DonKnacki** · 22/04/2009, 16h47

Je vais être chi**
le clic est déjà pris

en effet cliquer sur ces zones permet de télécharger un fichier

**le_chomeur** · 22/04/2009, 16h49

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

**DonKnacki** · 23/04/2009, 14h30

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

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

Code :

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

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 :

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

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à

**le_chomeur** · 23/04/2009, 16h08

si tu arrive sur une autre image, le repositionné par rapport a cette nouvelle image en fait et relancé le timer

**DonKnacki** · 23/04/2009, 16h38

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 ?

**E.Bzz** · 23/04/2009, 17h10

Envoyé par Nom

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

onmouseout / onmouseover

A+

Infobulle sur une image

JavaScript

Discussions similaires

Partager

Partager