Page 1 sur 2
afficher le détail d'une cellule dans une infobulle
Posté : 27 juil. 2007, 23:45
par Invité
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
Posté : 28 juil. 2007, 10:38
par Cyrano
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.
Posté : 28 juil. 2007, 12:10
par Invité
c'est une bonne idée mais aurais tu un exemple ou un lien sur cela?
Posté : 28 juil. 2007, 12:33
par Cyrano
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>
Teste déjà ça, je pense que ça devrait résoudre ton problème.
Posté : 28 juil. 2007, 14:08
par Invité
Merci Cyrano, ça à l'air de coller avec ce que je veux faire!
Posté : 28 juil. 2007, 14:53
par Invité
ç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>
Posté : 28 juil. 2007, 15:05
par Truc
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
Posté : 28 juil. 2007, 15:07
par martial
je suis inscrit truc mais milles excuses, je suis au boulot et j'ai oublié de me connecter!
Pour cela c'est fait.
mais d'autre part, j'aurais aimé mettre "RESOLU" mais malheureusement cela ne l'est pas (voir mon dernier POST)
Posté : 28 juil. 2007, 15:10
par martial
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!
Posté : 28 juil. 2007, 15:13
par Truc
Il n'y a aucune raison que "nom" change et pas "coordonnees"
comment récupères tu ces données ?
Posté : 28 juil. 2007, 15:24
par Cyrano
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.
Posté : 28 juil. 2007, 15:32
par martial
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!)
<table id="tableinfos0" summary="" style="display: none">
<tr>
<td><?php echo $row['coordonnees'];?></td>
</tr>
</table>
par
<table id="tableinfos0" summary="" style="display: none">
<tr>
<td><?php echo $row['nom'];?></td>
</tr>
</table>
Posté : 28 juil. 2007, 15:36
par Cyrano
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.
Posté : 28 juil. 2007, 16:13
par martial
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>
Posté : 28 juil. 2007, 16:23
par Truc
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.
<div id="blocinfo<?php echo $j; ?>" class="blocinfo">
...
< ... onmouseover="affichermasquer('tableinfos<?php echo $j; ?>');" >
...
<?php $j++; ?>
Enfaite partout où tu as "0" il faut incrémenter avec une variable qui à chaque tour de boucle change.