Afficher une image dans une info-bulle

Version imprimable

12/11/2006, 12h33
yoghisan

Afficher une image dans une info-bulle

Bonjour,

Malgré ma recherche, je n'ai rien trouvé non pas parce qu'il n'y a rien sur ma demande mais plutot que ma demande est mal formulée et je n'arrive pas à correctement la formuler ! Donc mille excuces pour cette question. :fessee:

Je suis enseignant et j'ai fait un relevé de notes pour mes élèves
http://mecatools.dfournier.free.fr/i...e&classe=2nd01

Donc voila enfin ma question :
Je souhaite afficher dans un hint la photo de l'élève lorsque l'on passe la souris sur son nom.
Comment peut-on faire ca ?

Merci d'avance de votre aide ! :lahola:
12/11/2006, 13h56
Bisûnûrs

Hello,

Je te conseille de lire cet excellent post de Auteur pour créer une infobulle.
12/11/2006, 14h35
yoghisan

Merci, le code est intéréssant mais je n'arrive pas à mettre une image.
Mais j'ai trouvé grace à toi le mot clé qui me manquait "infobulle" au lieu de "hint". Je vais faire des fouilles.

Dans le code proposé par Auteur, tu as ces lignes :

Code:

1
2
3
//contenu de la bulle :
el.innerHTML = " Xdoc= "+Xdoc+" px ; Ydoc= "+Ydoc+" px<br>";
el.innerHTML+= " Xfen= "+Xfen+" px ; Yfen= "+Yfen+" px";

Remplace-les par :

Code:

1
2
//contenu de la bulle :
el.innerHTML = "<img src='adressedetonimage'>";

Merci, j'avais trouvé mais j'avais fait une erreur de synthaxe "scr" au lieu de "src".

Cependant je bloque sur la taille de l'info-bulle... impossible de l'adapter à l'image

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
function MouseOver(ev,fichier)
{	var Xdoc, Xfen, Ydoc, Yfen, htDiv, lgDiv, dX, dY;
	var Ybulle;
	var el=document.getElementById("Bulle");
 
	//on affiche la boite de dialogue pour evaluer ses dimensions.
	if (el.style.display!="inline") {el.style.display="inline"};
 
	//hauteur et largeur de la bulle
	img = new Image();
	img.src = fichier;
 
	htDiv = img.height;
	lgDiv = img.width;
 
	//delta de la bulle sous la souris
	dY=10;
	dX=10;
 
	//position de la souris :
	Xfen = ev.clientX;
	Xdoc = Xfen + document.body.scrollLeft;
 
	Yfen = ev.clientY;
	Ydoc = Yfen + document.body.scrollTop;
 
	//position de la bulle dans la page
	if ((Xfen + lgDiv + dX) > document.body.clientWidth)
		el.style.left = document.body.clientWidth + document.body.scrollLeft - lgDiv;
	else
		el.style.left = Xdoc + dX;
 
	if ((Yfen + htDiv + dY) > document.body.clientHeight)
	{	Ybulle = document.body.clientHeight + document.body.scrollTop - htDiv-5;
		if (parseInt(Ybulle)>parseInt(Ydoc))
			el.style.top = Ybulle;
		else
			el.style.top = Ydoc - htDiv-dY;
	}
	else
		el.style.top = Ydoc + dY-5;
 
//contenu de la bulle :
	el.innerHTML = "<img src="+fichier+" />";
}

j'ai essaié de mettre e1.style.width=lgDiv; ben ca ne marche pas...

12/11/2006, 16h24
Bisûnûrs
Rajoute un id à ton image :

Code:

el.innerHTML = "<img src="+fichier+" id='portrait' />";

Et en-dessous tu peux définir la taille de la bulle :
Code:

1 2 el.style.width = document.getElementById('portrait').offsetWidth; el.style.height = document.getElementById('portrait').offsetHeight;
12/11/2006, 17h25
yoghisan

Arf ca ne marche pas bien avec Mozilla !

Tout ce temps perdu pour rien...
12/11/2006, 18h00
Bisûnûrs

Pourtant je n'ai aucun soucis avec Firefox avec le code de Auteur ...
12/11/2006, 18h36
yoghisan

C'est mon portail qui fout la merde rien à voir avec firefox.

J'ai trouvé une autre solution mais qui ne me satisfait pas.
14/11/2006, 21h52
yoghisan

Si quelqu'un cherche une reponse a cette question :
Voir absolumennt OverLib avec une traduction partielle mais suffisante