Ouverture popup au survol de la souris

Version imprimable

28/03/2007, 20h48
Didine981

Ouverture popup au survol de la souris

Bonjour. Etant étudiante en master informatique, je développe un projet d'annotation de pages web. Le langage utilisé est javascript.
J'aurai aimer pouvoir ajouter une popup qui s'ouvre quand on survole une partie d'un texte qui est annoté. Cependant je n'arrive pas à écrire le code correspondant en javascript.
Si quelqu'un peut m'aider, ça serait cool, car la je bloque complètement. Merci d'avance.

Bonjour a toi, moi je suis etudiant en 1er année d'IUT info lol ;)
Bon alors voici ce que je te propose, c'est donc une sorte d'infobulle :D

Voici le code 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
 
function affichage_bulle(current,e,cote,text)
{
	var largeur = 50;
	var hauteur = 20;
	if(cote == 'l') {
		largeur = - largeur * 3;
	}
	text = text.replace(/&lt;/gi,'<');
	text = text.replace(/&gt;/gi,'>');
	if(document.all) {
		if(document.readyState == 'complete') {
			document.all.bulle.innerHTML = text;
			document.all.bulle.style.pixelLeft = event.clientX + document.body.scrollLeft + largeur;
			document.all.bulle.style.pixelTop = event.clientY + document.body.scrollTop + hauteur;
			document.all.bulle.style.visibility = 'visible';
		}
	}
	else if(document.getElementById) {
		document.getElementById('bulle').innerHTML = text;
		document.getElementById('bulle').style.left = e.pageX + largeur + 'px';
		document.getElementById('bulle').style.top = e.pageY + hauteur + 'px';
		document.getElementById('bulle').style.visibility = 'visible';
	}
}
 
function cache_bulle() {
	if(document.all)
		document.all.bulle.style.visibility = 'hidden';
	else if(document.layers)
		document.bulle.visibility = 'hidden';
	else if(document.getElementById)
		document.getElementById('bulle').style.visibility = 'hidden';
}

Et pour le html:

Code:

1
2
3
 
<div id="bulle" class="bulle"></div>
<a href="#" onmouseover="affichage_bulle(this,event,'r','truc a mettre dans la bulle');" onmouseout="cache_bulle();">Lien</a>

A toi d'adapter ;)

Edit: j'ai oublié de preciser meme si tu l'aurais trouvé sans doute
function affichage_bulle(current,e,cote,text)
current c'est le conteneur d'appel, e c'est l'evenement, r c'est pour la postion right ou left et text c'est le texte lol ;)

28/03/2007, 21h32
bigboomshakala

:cry: la <table> n'a pas d'intérêt ici. on se sert des <div> pour ce genre de chose

au fait, faut-il obligatoirement un popup (question d'origine) ou un tooltip est envisageable (un peu comme dans la réponse prédédente) ?
28/03/2007, 21h33
cerede2000

Oui oui tout à fait méacoulpa lol c'est un code ressortit du placard! Et oui il faut remplacé la table par un div bien entendu ;)
28/03/2007, 21h34
bigboomshakala

1 pièce(s) jointe(s)

genre. un petit source développé il y a quelques semaines
28/03/2007, 21h42
cerede2000

Et voila fini la table ;)
03/04/2007, 15h21
Didine981

Le problème est que je travaille sous mozilla. Et la plupart des fonctions ne sont pas reconnues. Exemple : event.clientX, clienY ne fonctionne pas.

Je ne sais plus quoi faire, on a un réel problème de positionnement de la fenetre.
03/04/2007, 15h49
roudoudouduo
Pour pouvoir récupérer un evenement sous tous les navigateurs
Code:

1 2 3 4 function event(event){ event = event || window.event; }
Essaie avec pageX et pageY aussi. Voila un lien pas mal sur un bon code javascript (qui est un exemple pour pas mal de chose) :
http://www.webreference.com/programm...mn2/index.html
03/04/2007, 17h47
bigboomshakala

Citation:

Envoyé par Didine981

Le problème est que je travaille sous mozilla. Et la plupart des fonctions ne sont pas reconnues. Exemple : event.clientX, clienY ne fonctionne pas.

Je ne sais plus quoi faire, on a un réel problème de positionnement de la fenetre.

preuve que tu n'as pas regardé mon code (qui fonctionne sous IE, FF, Mozilla, etc...)

Petit bug de ton code bigboomshakala.

Sous FF 3.0.3, l'affichage du tooltip se fait en 0, 0 du fait qu'il manque "px" dans le style que tu affecte à la "bulle" ce qui provoque une erreur d'interprétation.

voici la version corrigée de la function tt_show

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
function tt_show(texte,classe)
{
	var contenu = texte;
  var finalPosX = tt_posX;
  if (finalPosX<0) finalPosX=0;
 
  tt_getEltById("bulle").className = 'tt_abs ' + (typeof classe == 'undefined' ? 'tt_default' : classe);
 
  if (document.layers)
  {
    tt_getEltById("bulle").document.write(contenu);
   	tt_getEltById("bulle").document.close() + "px";
    tt_getEltById("bulle").top = tt_posY + tt_yOffset +"px";
    tt_getEltById("bulle").left= finalPosX;
    tt_getEltById("bulle").visibility="show";
  }
  else
  {
   	tt_getEltById("bulle").innerHTML = contenu;
    tt_getEltById("bulle").style.top = tt_posY + tt_yOffset +"px";
    tt_getEltById("bulle").style.left = finalPosX + "px";
    tt_getEltById("bulle").style.visibility="visible";
  }
}

:king: effectivement, merci.
cependant tu as ajouté un "px" derrière un close() et oublié un "px" ailleurs.
je repeaufine le source :

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
function tt_show(texte,classe)
{
	var contenu = texte;
  var finalPosX = tt_posX;
  if (finalPosX<0) finalPosX=0;
 
  tt_getEltById("bulle").className = 'tt_abs ' + (typeof classe == 'undefined' ? 'tt_default' : classe);
 
  if (document.layers)
  {
    tt_getEltById("bulle").document.write(contenu);
   	tt_getEltById("bulle").document.close();
    tt_getEltById("bulle").top = tt_posY + tt_yOffset +"px";
    tt_getEltById("bulle").left= finalPosX + "px";
    tt_getEltById("bulle").visibility="show";
  }
  else
  {
   	tt_getEltById("bulle").innerHTML = contenu;
    tt_getEltById("bulle").style.top = tt_posY + tt_yOffset +"px";
    tt_getEltById("bulle").style.left = finalPosX + "px";
    tt_getEltById("bulle").style.visibility="visible";
  }
}

02/02/2010, 11h26
kiproko

bonjour et merci bigboomshakala et Radical pour ce parfait petit source, c'est exactement ce que je cherchais!
ah j'aime Internet et ses forums! :D
bonne journée à tous