bonjour à tous!
N'ayant pas assez de place pour afficher toutes les colonnes d'une table sur une seule page HTML, je cherche une soultion (certainement avec AJAX) pour afficher le détai d'une cellule dans une infobulle
par exemple la cellule affiche le nom de la personne et en passsant la souris sur cette cellule l'infobulle afficherait son nom son prénom, son adresse et téléphone
(Avant de poser cette question j'ai cherché desesperemment la solutin sur Google et ce forum!)
Merci de m'aiguiller
la communauté d'entraide francophone dédiée au PHP
afficher le détail d'une cellule dans une infobulle
Pas besoin d'AJAX pour ça. Mets tes informations dans une cellule du tableau dans un bloc que tu masques avec un CSS (display: none). Ajoute un evenement sur un lien de la ligne en question qui va dynamiqyement modifier le style en mettant le display à block (onmouseover) et le remettre à none (onmouseout). Il te restera également à positionner ton bloc d'information par rapport à la ligne.
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse 
Invité
Invité n'ayant pas de compte PHPfrance
c'est une bonne idée mais aurais tu un exemple ou un lien sur cela?
Un exemple, on peut. Construit en 5mn :
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title>Infobulles</title>
<script type="text/javascript">
/* <![CDATA[ */
function $(elt)
{
return document.getElementById(elt);
}
function affichermasquer(idbloc)
{
var etat = $(idbloc).style.display;
$(idbloc).style.display = (etat == 'none') ? 'block' : 'none';
}
/* ]]> */
</script>
<style type="text/css">
/* <![CDATA[ */
div.blocinfo {
position: relative;
}
div.blocinfo p {
z-index: 10;
}
div.blocinfo table {
position: absolute;
top: 25px;
left: 0px;
border: 1px solid #ccc;
z-index: 20;
color: #000;
background-color: #efefef;
border-collapse: collapse;
}
div.blocinfo table td {
border: 1px solid #ccc;
}
/* ]]> */
</style>
</head>
<body>
<table summary="">
<tr>
<td>
<p>Ligne 1</p>
</td>
<td>
<p>Titre quelconque 1</p>
</td>
<td>
<div id="blocinfo0" class="blocinfo">
<p><a href="./" title="Afficher les détails" onmouseover="affichermasquer('tableinfos0');" onmouseout="affichermasquer('tableinfos0');">Détails</a></p>
<table id="tableinfos0" summary="" style="display: none">
<tr>
<td>Info 0</td>
<td>Seconde info 0</td>
<td>Troisieme info 0</td>
<td>Dernière info 0</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<p>Ligne 2</p>
</td>
<td>
<p>Titre quelconque 2</p>
</td>
<td>
<div id="blocinfo1" class="blocinfo">
<p><a href="./" title="Afficher les détails" onmouseover="affichermasquer('tableinfos1');" onmouseout="affichermasquer('tableinfos1');">Détails</a></p>
<table id="tableinfos1" summary="" style="display: none">
<tr>
<td>Info 1</td>
<td>Seconde info 1</td>
<td>Troisieme info 1</td>
<td>Dernière info 1</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<p>Ligne 3</p>
</td>
<td>
<p>Titre quelconque 3</p>
</td>
<td>
<div id="blocinfo2" class="blocinfo">
<p><a href="./" title="Afficher les détails" onmouseover="affichermasquer('tableinfos2');" onmouseout="affichermasquer('tableinfos2');">Détails</a></p>
<table id="tableinfos2" summary="" style="display: none">
<tr>
<td>Info 0</td>
<td>Seconde info 0</td>
<td>Troisieme info 0</td>
<td>Dernière info 0</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse
Invité
Invité n'ayant pas de compte PHPfrance
Merci Cyrano, ça à l'air de coller avec ce que je veux faire!
Invité
Invité n'ayant pas de compte PHPfrance
ça marche mais j'ai mis une variable dans le div, le probléme est qu'au survol de chaque cellule, l'info de variable est la même (le premier champ), existe-t-il un moyen pour définir une variable dans le script java pour que la variable "coordonnée" corresponde à la variable "nom"?
<table summary="">
<tr>
<td>
<p>Ligne 1</p>
</td>
<td>
<p>Titre quelconque 1</p>
</td>
<td>
<div id="blocinfo0" class="blocinfo">
<p><a href="./" title="Afficher les détails"
onmouseover="affichermasquer('tableinfos0');"
onmouseout="affichermasquer('tableinfos0');">
<?php echo $row['nom']; ?></a>
</p>
<table id="tableinfos0" summary="" style="display: none">
<tr>
<td><?php echo $row['coordonnees'];?></td>
</tr>
</table>
Pas très clair... ceci dit java n'est pas javascript (même si c'est plus rapide à écrire, JS l'est encore plus 
)
dans le bout de code que tu nous montres je ne vois pas très bien ce qui cloche.
Si tu veux changer de valeur il te faut changer la valeur de $row['coordonnees'], une boucle ou un truc dans le genre
)dans le bout de code que tu nous montres je ne vois pas très bien ce qui cloche.
Si tu veux changer de valeur il te faut changer la valeur de $row['coordonnees'], une boucle ou un truc dans le genre
/!\ Avant de poster se documenter et rechercher.
Qui ne sait pas rendre un service n'a pas le droit d'en demander.
MaBrute
Ce qui cloche c'est que le nom est différent à chaque cellule mais le DIV coordonnées est toujours le même (en général la premiére adresse de la table qui correspond au premier nom de la table)
pourtant la requête SQL est valable puisque le tableau généré m'affiche tous les noms et toutes les adresses!
pourtant la requête SQL est valable puisque le tableau généré m'affiche tous les noms et toutes les adresses!
Dans la boucle qui traite les données pour préparer l'affichage, tu ne dois construire que les lignes, pas le tableau complet.
Donc avant la boucle, tu auras l'en-tête de ton tableau, ensuite la boucle qui va construire un <tr> à chaque tour et enfin la fermeture du tableau.
De cette manière les variables diffèreront à chaque tour pour autant qu'elles soient différentes d'une ligne à l'autre dans ta base de données.
Donc avant la boucle, tu auras l'en-tête de ton tableau, ensuite la boucle qui va construire un <tr> à chaque tour et enfin la fermeture du tableau.
De cette manière les variables diffèreront à chaque tour pour autant qu'elles soient différentes d'une ligne à l'autre dans ta base de données.
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse
je récupére mes données par une simple requête
et je suis entierement d'accord avec toi, il n'y a aucune raison logique de récupérer un nom différent à chaque cellule et une coordonnée identique dans le DIV!
pourtant j'ai scrupuleusement respecté le code de Cyrano et cela ne vient pas du resultat de ma requête en effet, pour faire un essai j'ai remplacé la variable "coordonnees" par "nom" et le resultat est le même (un nom différent dans chaque cellule mais le nom du premier champ dans le DIV!)
Code : Tout sélectionner
SELECT nom,coordonnees from matable
pourtant j'ai scrupuleusement respecté le code de Cyrano et cela ne vient pas du resultat de ma requête en effet, pour faire un essai j'ai remplacé la variable "coordonnees" par "nom" et le resultat est le même (un nom différent dans chaque cellule mais le nom du premier champ dans le DIV!)
<table id="tableinfos0" summary="" style="display: none">
<tr>
<td><?php echo $row['coordonnees'];?></td>
</tr>
</table> <table id="tableinfos0" summary="" style="display: none">
<tr>
<td><?php echo $row['nom'];?></td>
</tr>
</table> Mets donc le code complet de ta construction, autrement, il sera impossible de voir l'erreur. J'ai bien une bonne idée de sa nature, mais on évitera les spéculations inutiles.
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse
Voilà le code complet ( en fait le DIV affiche le téléphone, le fax ou le mail!)
<?php
include("header.php");
include("menumod.php");
?>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
<title>Rechercher</title>
<link rel="stylesheet" type="text/css" href="css/transparent.css" />
<style type="text/css">
body {
background:;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:black;
font-weight:bold;
font-size: 11px;
}
a:hover {color:white;}
a {text-decoration:none; color:black;}
.Style1 {font-size: x-small}
</style>
<script type="text/javascript">
/* <![CDATA[ */
function $(elt)
{
return document.getElementById(elt);
}
function affichermasquer(idbloc)
{
var etat = $(idbloc).style.display;
$(idbloc).style.display = (etat == 'none') ? 'block' : 'none';
}
/* ]]> */
</script>
<style type="text/css">
/* <![CDATA[ */
div.blocinfo {
position: relative;
}
div.blocinfo p {
z-index: 10;
}
div.blocinfo table {
position: absolute;
top: 25px;
left: 0px;
border: 1px solid #ccc;
z-index: 20;
color: #000;
background-color: #efefef;
border-collapse: collapse;
}
div.blocinfo table td {
border: 1px solid #ccc;
}
/* ]]> */
</style>
</head>
<BODY>
<span class="Style2">
<form action="rechercho.php" method="post" name="f" enctype="multipart/form-data">
<td><input name="choix" value="nom" checked="checked" type="radio" />nom</td>
<td><input name="choix" value="Adresse" type="radio" />Adresse</td>
<td><input name="choix" value="CP" type="radio" />CP</td>
<td><input name="choix" value="VILLE" type="radio" />Ville</td>
<td> <input type=hidden name=count value="0" size=1
onkeydown="alert('Cette valeur est cre automatiquement!');
return false;">
<td><input type="text" name="recherche" size="30" maxlength="30" /></td>
<input type=hidden name=reset value="Restaurer">
<input name="Rechercher" type="submit" class="button" value="Rechercher" />
</td>
</form>
<div id="rechercheinfo" style="position:absolute;
left:350px; top:25px; visibility: hidden">
<table border=1 cellspacing=0 cellpadding=4>
<tr><td bgcolor=#FF9900>
<font size=2 face="arial,helvetica" color=#000000><b>
</b></font>
</td></tr></table>
</div>
<script language="JavaScript"><!--
document.f.recherche.onkeydown = function()
{ document.f.count.value++; }
document.f.reset.onclick = function()
{ return(confirm('Voulez-vous vraiment\n'
+'annuler toutes les saisies ?')); }
if(navigator.appName.indexOf('Netscape') != -1)
{
with (document)
{
f.count.onmouseover = function()
{ countinfo.visibility='visible'; }
f.count.onmouseout = function()
{ countinfo.visibility='hidden'; }
f.recherche.onmouseover = function()
{ rechercheinfo.visibility='visible'; }
f.recherche.onmouseout = function()
{ rechercheinfo.visibility='hidden'; }
f.reset.onmouseover = function()
{ resetinfo.visibility='visible'; }
f.reset.onmouseout = function()
{ resetinfo.visibility='hidden'; }
}
}
if(navigator.appName.indexOf('Explorer') != -1)
{
with (document)
{
f.count.onmouseover = function()
{ countinfo.style.visibility='visible'; }
f.count.onmouseout = function()
{ countinfo.style.visibility='hidden'; }
f.recherche.onmouseover = function()
{ rechercheinfo.style.visibility='visible'; }
f.recherche.onmouseout = function()
{ rechercheinfo.style.visibility='hidden'; }
f.reset.onmouseover = function()
{ resetinfo.style.visibility='visible'; }
f.reset.onmouseout = function()
{ resetinfo.style.visibility='hidden'; }
}
}
//--></script>
<?php
if ( !$_POST[choix] || !$_POST[recherche])
{
echo "<table width=100% border=1 align=center>";
echo "<td colspan=9 align=center bgcolor='#cccccc'>RECHERCHE :<img src='images/o.png' width='20' height='20'></td>"; echo "</table>";
exit;
} $connect=mysql_connect("localhost", "root", "") or die ("Echec de la connexion au serveur !");
$select=mysql_select_db("carnet");
$query = "SELECT nom,Adresse,CP,VILLE,coordonnees FROM ident
". $_POST[choix]." LIKE '%".$_POST[recherche]."' ORDER BY nom DESC";
$result=mysql_query($query);
$totenreg=mysql_num_rows($result);
if ( $result && mysql_num_rows($result) ==0)
echo "<td colspan=9 align=center bgcolor='#FFFFFF'><center>PAS DE REPONSES CORRESPONDANTES</td>";
else if ($result) {
echo "<table width=70% border=0 align=center summary="">";
echo "<tr bgcolor='#CCCCCC'>";
echo "<td colspan=9><b><center><span font-size='11px'><img src='images/o.png' width='20' height='20'>NOMBRE DE REPONSES : ".$totenreg."</td>";
echo "</tr>";
echo "<tr align=center bgcolor=#FFFFCC>";
echo "<td align=center span class=Style2>nom</td>";
echo "<td align=center span class=Style2>Adresse Postale</td>";
echo "</tr>";
$i=0;
while ($row=mysql_fetch_array($result)) {
if ($i==0) {
echo "<tr bgcolor=#CCFFFF>";
$i++; }
else {
echo "<tr bgcolor=#EEEEEE>";
$i--;
} ?>
<td span class=Style3><?php echo $row["nom"]; ?>
<div id="blocinfo0" class="blocinfo">
<p><a href="./" title="Afficher les coordonnées" onmouseover="affichermasquer('tableinfos0');" onmouseout="affichermasquer('tableinfos0');">Détails</a></p>
<table id="tableinfos0" summary="" style="display: none">
<tr>
<td><?php echo $row["coordonnees"]; ?></td>
</tr>
</table>
</div></td>
<td align=center span class=Style2><?php $row['Adresse']." ". $row['CP']." ". $row['VILLE'] ?></td></tr>
<?php } ?>
</table><?php }
?>
</body>
</html>
enfaite tu affiches toujours le même div
Il faut rendre le tout un peu plus dynamique, notamment l'appel de la fonction JS et de l'id du div.
Il faut rendre le tout un peu plus dynamique, notamment l'appel de la fonction JS et de l'id du div.
<div id="blocinfo<?php echo $j; ?>" class="blocinfo">
...
< ... onmouseover="affichermasquer('tableinfos<?php echo $j; ?>');" >
...
<?php $j++; ?>
/!\ Avant de poster se documenter et rechercher.
Qui ne sait pas rendre un service n'a pas le droit d'en demander.
MaBrute