Bonjour,
Je suis débutant en Php. J'ai suivi les infos du siteduzero pour essayer de créer un truc assez simple.
Je vais en base rechercher des joueurs et les fonctions qu'ils peuvent occuper (arbitre, équipe, entraineur, ...).
En arrivant sur la page, l'ensemble des joueurs est affiché. En bas de la page, toutes les fonctions disponibles sont placées.
ce que je cherche à faire, c'est quand le pointeur passe sur une fonction, les joueurs ayant cette qualification restent affichés, les autres sont cachés. Quand la souris sort de la fonction, tous les joueurs se réaffichent.
Pour cela, j'utilise un tableau associatif à 2 dimensions :
['joueur1'][0]='arbitre'
['joueur1'][1]='equipe1'
...
Les appels par les onmouseover et onmouseout marchent mais le javascript n'est pas très compréhensif. Soit il ne cache rien, soit quand je lui dit de tout cacher (pour voir), en sortie de zone, il ne me réaffiche rien.
Je suis en panne séche. Si l'un d'entre vous pouvait m'aider, ce serait très aimable. Je teste à la fois sur IE8 et sur Chrome. c'est idem.
Voici le code de la page :
<!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">
<?php
try
{
//connection BDD
$bdd=new PDO('mysql:host=localhost;dbname=VBCD','root','');
}
catch(Exception $e)
{
die('Erreur : '.$e->getMessage());
}
//on récupére toutes les infos dont on a besoin
$joueurs = $bdd->query('select * from JOUEUR j inner join ACTIVITE a on j.id=a.id_joueur where a.annee=\'20092010\' and a.id_fonction=\'jo\' order by j.nom') or die(print_r($bdd->errorInfo()));
$fonctionx = $bdd->query('select f.id, f.role from FONCTION f inner join ACTIVITE a on f.id=a.id_fonction where a.annee=\'20092010\' group by f.id, f.role') or die(print_r($bdd->errorInfo()));
$tableau = $bdd->query('select * from ACTIVITE where annee=\'20092010\' order by id_joueur') or die(print_r($bdd->errorInfo()));
?>
<head>
<title>liste des joueurs</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<SCRIPT language="Javascript">
//construction du tableau associatif à 2 dimensions
var activite = new Array();
<?php
$id="";
$i=0;
while($element=$tableau->fetch())
{
if($element['ID_JOUEUR']!=$id)
{
echo 'activite[\''.$element['ID_JOUEUR'].'\']=new Array();';
$i=0;
$id=$element['ID_JOUEUR'];
}
echo 'activite[\''.$element['ID_JOUEUR'].'\']['.$i.']=\''.$element['ID_FONCTION'].'\';';
$i++;
}
?>
//fonction qui cache les joueurs qui n'ont pas la fonction
function cache(idAfficher)
{
for(var key in activite)
{
document.getElementById(key).style.visibility='hidden';
var role=activite[key];
for(var j=0; j<role.length;j++)
{
if(role[j]=idAfficher);
{
document.getElementById(key).style.visibility='visible';
}
}
}
}
// fonction qui réaffiche tout le monde
function affiche()
{
for(var key2 in activite)
{
document.getElementById(key2).style.visibilty='visible';
}
}
</SCRIPT>
<?php $tableau->closeCursor(); ?>
<h2>Les JOUEURS</h2>
<?php
// on affiche tous les joueurs
$premier=true;
$colonne=1;
while($joueur=$joueurs->fetch())
{
if($premier)
{
echo '<table width=\'100%\'>';
$premier=false;
}
if($colonne==1)
{
echo '<tr>';
}
if($joueur['ALIAS']=="")
{
echo '<td width=\'12%\' align=\'center\'><span id=\''.$joueur['ID_JOUEUR'].'\'><img src=\''.$joueur['PHOTO'].'\' alt=\''.$joueur['PRENOM'].' '.$joueur['NOM'].'\' title=\''.$joueur['PRENOM'].' '.$joueur['NOM'].'\'/></span></td>';
}else{
echo '<td width=\'12%\' align=\'center\'><span id=\''.$joueur['ID_JOUEUR'].'\'><img src=\''.$joueur['PHOTO'].'\' alt=\''.$joueur['PRENOM'].' '.$joueur['NOM'].'\' title=\''.$joueur['PRENOM'].' '.$joueur['NOM'].' alias '.$joueur['ALIAS'].'\' /></span></td>';
}
$colonne++;
if($colonne==9)
{
echo '</tr>';
$colonne=1;
}
}
if($colonne!=1)
{
while($colonne!=9)
{
echo '<td></td>';
$colonne++;
}
echo '</tr>';
}
echo '</table>';
$joueurs->closeCursor();
// on affiche toutes les fonctions possibles
echo '<table width=\'100%\'>';
echo '<tr>';
while($fonction=$fonctionx->fetch())
{
echo '<td width=\'12%\'><span onmouseover="cache(\''.$fonction['id'].'\');" onmouseout="affiche();" ><img src=\'../photos/ballon2.png\' alt=\'ballon.png\' style="vertical-align:middle"/><strong>'.$fonction['role'].'</strong> </span></td>';
}
echo '</tr></table>';
$fonctionx->closeCursor();
?>
</body>
</html>
Cordialement,
Jean-Philippe