Discussion :

[pthenot]

Bonjour,
J'ai écrit un cahier de rdv en php/mysql.
Je suis à la recherche de la meilleur solution pour créer une fenêtre qui apparait lorsque la souris survole le nom et dans laquelle seront affichés sur des lignes successives prenom, N° tél ect..
A noter que je n'ai pas de pb pour les requêtes d'intérrogation de la bdd, je ne souhaite pas utiliser des fenêtres popup.
Merci de votre aide

[supersnail]

Bonjour et bienvenue sur les forums,

Tu seras obligé de toute façon de passer par javascript.

Tu peux faire tout bêtement un DIV caché, que tu rendras visible au survol de la souris, et que tu positionneras dynamiquement à l'élément.

Sinon,si tu veux quelque chose qui ressemble un peu plus à une fenêtre, tu peux toujours te tourner vers un framework javascript (je pense par exemple à jQuery UI), qui proposent des "fausses popups"

[insane1]

Ce que tu cherches à faire est en fait une infobulle. Il en existe en javascript comme te l'a dit supersnail, mais il en existe aussi en css ( uniquement ).
Regarde ici

[RomainVALERI]

Effectivement, comme propose supersnail, si tu utilises déjà un framework, pioche dedans il doit y avoir des tooltips ou un équivalent.

Dans le cas contraire, au cas où tu décides de créer tes affichages toi-même, sache que ce n'est pas non plus la mer à boire. Un exemple simpliste que j'avais sous le coude, pour se donner une idée ou à adapter... ^^ sait-on jamais ?

Code javascript :

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
function divCommentaire(elementRacine, texte, offsetX, offsetY) {   
   var divC = document.createElement("DIV");
   elementRacine.appendChild(divC);
   divC.id = "divCom_" + elementRacine.id.substr(4);
   divC.className = "divCom";
   divC.style.display = "none";
 
   elementRacine.addEventListener("mouseover", ecouteur_commentaire, false);
   elementRacine.addEventListener("mouseout", ecouteur_commentaire, false);
 
   var positionRelative = elementRacine.posXY();// tableau à 2 postes : [positionX, positionY] 
   divC.style.left = (positionRelative[0] - 150 + offsetX) + 'px';// -150 = moitié de la largeur du div ( pour centrage ) 
   divC.style.top = (positionRelative[1] + 10 + offsetY) + 'px';// +10 = simple ajustement pour l'harmonie de l'affichage
 
   // écriture du contenu
   var spanTexte = document.createElement("SPAN");
   divC.appendChild(spanTexte);
   spanTexte.setAttribute("class","spanCom");
   spanTexte.appendChild(document.createTextNode(texte));
}
 
// FONCTION : calcul de la position absolue d'un élément (dans la fenêtre)
// RETOUR : tableau à 2 postes : coordonnées [X, Y] en entiers
Element.prototype.posXY = function() {   
	var tabPosition = new Array();
	var feuille = this;
	tabPosition[0] = feuille.offsetLeft;
	tabPosition[1] = feuille.offsetTop;
 
	while(feuille.offsetParent) {
		feuille = feuille.offsetParent; // récursivité
		tabPosition[0] += feuille.offsetLeft;
		tabPosition[1] += feuille.offsetTop;
	}
	return tabPosition;
}
 
function ecouteur_commentaire(e) {
   var spanSource = e.target;
   var numCom = spanSource.id.substr(4);
   var com = document.getElementById("divCom_" + numCom);
   if (com && e.type == "mouseover") {
      com.style.display = "block";
      spanSource.style.backgroundColor = "#999";
   }
   if (com && e.type == "mouseout") {
      com.style.display = "none";
      spanSource.style.backgroundColor = "";
   }
}

Tiens au fait en le relisant : je vois que c'est une version avec addEventListener, donc pour la rendre compatible IE il faudrait simplement remplacer les écouteurs par une version crossbrowser, genre addEvent, qui switche sur addEventListener ou attachEvent en fonction du navigateur ...

[laurentSc]

Si le comportement qu'on a ici quand la souris survole le mot "barns" t'intéresse, il faut adapter le code que voici :

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
  <style>.popup_anchor div.popup{visibility: hidden;
z-index: 10;
top: 120px;
left: 100px;
position: absolute;
background-color:white;
border-color:black;
}
span:hover.popup_anchor div.popup{
visibility: visible;
}
span .popup_anchor div:hover.popup{
visibility: visible;
}
  </style>
 
                                          <font color="blue"><span
 onmouseover="document.getElementById('popupid').style.visibility = 'visible';"><span
 class="popup_anchor"><b>barns</b><span
 onmouseout="document.getElementById('popupid').style.visibility = 'hidden';">
                                          <div class="popup"
 id="popupid"><span><img src="chevaux2008_010.jpg"></span><br>
                                          </div>
                                          </span></span></span></font>

(mélange de js et de css)