Discussion :

[Didine981]

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.

[cerede2000]

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

Voici le code 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
 
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 :

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

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

[bigboomshakala]

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) ?

[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

[bigboomshakala]

genre. un petit source développé il y a quelques semaines

[cerede2000]

Et voila fini la table

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

[roudoudouduo]

Pour pouvoir récupérer un evenement sous tous les navigateurs

Code :

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

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

[bigboomshakala]

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

[Radical]

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 :

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

[bigboomshakala]

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

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

[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!
bonne journée à tous