Stocker contenu d'une enregistrement dans une infobulle [Résolu]

smotte761 · 22/04/2011, 10h00

Bonjour,

J'ai créer une page en PHP qui me liste des enregistrements (une liste de contacts).

Dans mon tableau, j'affiche le minimum d'informations : nom, prénom et photo.

Je voulais savoir si il existe un moyen qui lorsque je place ma souris sur une ligne, une infobulle apparaisse en affichant toutes les infos : nom, prénom, adresse, tél, etc...

Si je change de ligne avec ma souris, les données de l'infobulle changent... en fonction du contact.

Merci pour votre réponse.

Stéph

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
<?php
include("../connexion.php");
include("menu.php");
$vid=$_SESSION['vid'];
$sql = "select * from tadherents, tcontacts where idmembrep='$vid' and idadherent=idmembref and accepte='oui'";
$result = mysql_query($sql); 
?>
<HTML>
 
<HEAD>
<link rel="stylesheet" href="test.css" type="text/css" /> 
<script>
function afficher_aide(aide) {
if (aide.style.display == "none") aide.style.display = "block";
else aide.style.display = "none";
}
</script>
</HEAD>
<body>
 
<TABLE border=1 align=center>
<caption><font size=4 color='#006BAC'>Mes contacts</font>
<TR align='center'>
<TD width=100>Nom</TD>
<TD width=100>Prénom</TD>
<TD width=100>Photo</TD>
</TR>
<?php while(($vligne = mysql_fetch_assoc($result))!==false): ?>
<TR>
<TD><?php echo $vligne["idcontact"];?></TD>
<TD><?php echo $vligne["nom"];?></TD>
<TD><?php echo $vligne["prenom"];?></TD>
<TD><IMG SRC="/images/<?php echo $vligne ['photo']; ?>" alt=""
onmouseover="javascript: afficher_aide(document.getElementById('aide_salaire'));"
onmouseout="javascript: afficher_aide(document.getElementById('aide_salaire'));"
/>
<div class="infobulle">
<div class="infobulle-texte" id="aide_salaire" style="display: none;">
<?php 
$vtest=$vligne['idcontact'];
echo $vtest;
endwhile;?>
 
 
 
 
</div>
</div>
 
</TD>
</TR>
 
</Table>
</UL>
</BODY>
</HTML>

Shikiryu · 22/04/2011, 10h59

Oui, c'est totalement possible.

Plusieurs méthodes (no-exhaustives) :

Vous chargez toutes les infos,vous en cachez une partie et avec un ptit bout de js, vous les montrez/cachez en temps voulu
Vous chargez seulement les éléments à montrer, puis à chaque évènement, vous lancez une requête AJAX qui va récupérer les autres infos

smotte761 · 22/04/2011, 11h09

Merci pour votre rapide réponse mais sincèrement je n'ai pas tout compris.
Je suis un vrai débutant en AJAX.

Avez vous à tout hazard un exemple...

Merci par avance.

Shikiryu · 22/04/2011, 11h35

Je n'avais pas vu l'édition de votre question.
Le problème du code que vous avez actuellement, c'est que dans la boucle while, vous fournissez le même "id" à toutes les bulles d'aide.

Voici la modification à apporter :

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
<?php
include("../connexion.php");
include("menu.php");
$vid=$_SESSION['vid'];
$sql = "select * from tadherents, tcontacts where idmembrep='$vid' and idadherent=idmembref and accepte='oui'";
$result = mysql_query($sql); 
?>
<HTML>
 
<HEAD>
<link rel="stylesheet" href="test.css" type="text/css" /> 
<script>
function afficher_aide(aide) {
if (aide.style.display == "none") aide.style.display = "block";
else aide.style.display = "none";
}
</script>
</HEAD>
<body>
 
<TABLE border=1 align=center>
<caption><font size=4 color='#006BAC'>Mes contacts</font>
<TR align='center'>
<TD width=100>Nom</TD>
<TD width=100>Prénom</TD>
<TD width=100>Photo</TD>
</TR>
<?php while(($vligne = mysql_fetch_assoc($result))!==false): ?>
<TR>
<TD><?php echo $vligne["idcontact"];?></TD>
<TD><?php echo $vligne["nom"];?></TD>
<TD><?php echo $vligne["prenom"];?></TD>
<TD><IMG SRC="/images/<?php echo $vligne ['photo']; ?>" alt="" onmouseover="javascript: afficher_aide(document.getElementById('aide_salaire<?php echo $vligne["idcontact"]?>'));"
onmouseout="javascript: afficher_aide(document.getElementById('aide_salaire<?php echo $vligne["idcontact"]?>'));" />
<div class="infobulle">
<div class="infobulle-texte" id="aide_salaire<?php echo $vligne["idcontact"]?>" style="display: none;">
<?php 
$vtest=$vligne['idcontact'];
echo $vtest;
endwhile;?>
 
 
 
 
</div>
</div>
 
</TD>
</TR>
 
</Table>
</UL>
</BODY>
</HTML>

(Merci de ne pas faire un simple copier/coller mais d'essayer de noter les différences et de les comprendre avant toute chose)

smotte761 · 22/04/2011, 11h57

Un grand merci. Effectivement, je n'avais pas vu mon erreur... Je serai plus vigilant la prochaine fois.

Merci encore.

22/04/2011, 10h59	#2
Shikiryu Membre chevronné Développeur Web Inscription : mars 2011 Messages : 399 Détails du profil Informations personnelles : Sexe : Localisation : France, Paris (Île de France) Informations professionnelles : Activité : Développeur Web Secteur : Finance Informations forums : Inscription : mars 2011 Messages : 399 Points : 662 Points : 662	Oui, c'est totalement possible. Plusieurs méthodes (no-exhaustives) : Vous chargez toutes les infos,vous en cachez une partie et avec un ptit bout de js, vous les montrez/cachez en temps voulu Vous chargez seulement les éléments à montrer, puis à chaque évènement, vous lancez une requête AJAX qui va récupérer les autres infos __________________ Membre de StackOverflow, je suis un fervant utilisateur de PHP et de jQuery. Après des études de graphisme, j'ai décidé de mélanger développement web et web design. J'ai ainsi donc créé mon site web mais aussi plusieurs projets personnels. Dans les plus aboutis, vous pourrez trouver dans mon labo et dans mon devblog, un raccourcisseur d'url, un bookmarklet pour envoyer l'url de la page actuelle vers votre email pour lire plus tard ou sauvegarder, mon générateur de template HTML5, etc...
	00

22/04/2011, 11h57	#5
smotte761 Candidat au titre de Membre du Club Stéphane Inscription : mars 2011 Messages : 39 Détails du profil Informations personnelles : Nom : Stéphane Localisation : France Informations forums : Inscription : mars 2011 Messages : 39 Points : 13 Points : 13	Merci ! Un grand merci. Effectivement, je n'avais pas vu mon erreur... Je serai plus vigilant la prochaine fois. Merci encore.
	00

22/04/2011, 11h09	#3
smotte761 Candidat au titre de Membre du Club Stéphane Inscription : mars 2011 Messages : 39 Détails du profil Informations personnelles : Nom : Stéphane Localisation : France Informations forums : Inscription : mars 2011 Messages : 39 Points : 13 Points : 13	Merci pour votre rapide réponse mais sincèrement je n'ai pas tout compris. Je suis un vrai débutant en AJAX. Avez vous à tout hazard un exemple... Merci par avance.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email