Soucis d'affichage de données apres requete SQL dans un popup DHTML.

Bonjour,

J'ai un soucis avec un Popup DHTML dans lequel je n'arrive pas à afficher dynamiquement le contenu des champs de ma Bdd.

J'ai une petite Base de Données de test qui contient 2 champs : ID et NOM.

Contenu des Champs ( ID / NOM ) :
1 / Pomme
2 / Poire
3 / Raisin

J'ai une petite requete sql suivie d'une while qui affiche dans la page les 3 noms : Pomme, Poire et Raisin.
Ces noms sont clickables et ouvrent chacun un popup DHTML.

Tout se passe bien SAUF qu'il m'est impossible d'afficher dans le popup le nom du fruit associé au lien cliqué.

Même en metant tout ça dans la boucle While qui gere l'affichage des noms dans la page, la popup recupere toujours uniquement le premier nom de la liste,
du coup, mes 3 Popups contiennent tous la meme chose, à savoir "Pomme".

Je sais que ca n'est pas tres clair mais je ne vois pas trop comment expliquer ça autrement.

J'ai bien essayé de passer l'id en parametre dans l'url du lien cliqué mais idem, impossible de le recupérer ou de l'afficher dans le popup.
Si je pouvais ne serait-ce que le récupérer l'ID dans le <div>, je pense que je pourrais me débrouiller avec une seconde requete sql.

Soit je suis stupide, soit il me manque des notions car je débute mais dans tous les cas, j'ai besoin d'aide.

Merci d'avance



Le morceau du code concerné :

$query = "SELECT * FROM table_fruits WHERE id > 0 ORDER BY nom ASC";
$result = mysql_query($query);

while ($row = mysql_fetch_array($result))
{
$id = $row['id_fruit'];
$nom = $row['nom_fruit'];
echo '<a href="#" onClick="fireMyPopup();">'.$nom.'</a><br>';

echo '<div id="styled_popup" name="styled_popup" style="position: absolute; margin-left: auto; margin-right: auto; width: 940px; display: none; zoom: 1;">
<table width="500" cellpadding="0" cellspacing="0" border="0" class="bdcolor">
<tr><td style="background-color:#ff0000; width: 500px; height: 350;" align="center">

'.$nom.'

<br><br>

<a href="#" onClick="javascript:fadeOutMyPopup();">Fermer le popup</a>

</td></tr>
</table>
</div>';
}



Le javascript utilisé :

<script type='text/javascript'>

// Browser safe opacity handling function

function myPopupRelocate() {
var scrolledX, scrolledY;
if( self.pageYOffset ) {
scrolledX = self.pageXOffset;
scrolledY = self.pageYOffset;
} else if( document.documentElement && document.documentElement.scrollTop ) {
scrolledX = document.documentElement.scrollLeft;
scrolledY = document.documentElement.scrollTop;
} else if( document.body ) {
scrolledX = document.body.scrollLeft;
scrolledY = document.body.scrollTop;
}

var centerX, centerY;
if( self.innerHeight ) {
centerX = self.innerWidth;
centerY = self.innerHeight;
} else if( document.documentElement && document.documentElement.clientHeight ) {
centerX = document.documentElement.clientWidth;
centerY = document.documentElement.clientHeight;
} else if( document.body ) {
centerX = document.body.clientWidth;
centerY = document.body.clientHeight;
}

var leftOffset = scrolledX + (centerX - 940) / 2;
var topOffset = scrolledY + (centerY - 350) / 2;

document.getElementById("styled_popup" ).style.top = topOffset + "px";
document.getElementById("styled_popup" ).style.left = leftOffset + "px";
}

function setOpacity( value ) {
document.getElementById("styled_popup" ).style.opacity = value / 10;
document.getElementById("styled_popup" ).style.filter = 'alpha(opacity=' + value * 10 + ')';
}

function fadeInMyPopup() {
for( var i = 0 ; i <= 100 ; i++ )
setTimeout( 'setOpacity(' + (i / 10) + ')' , 8 * i );
}

function fadeOutMyPopup() {
for( var i = 0 ; i <= 100 ; i++ ) {
setTimeout( 'setOpacity(' + (10 - i / 10) + ')' , 8 * i );
}

setTimeout('closeMyPopup()', 800 );
}

function closeMyPopup() {
document.getElementById("styled_popup" ).style.display = "none"
}

function fireMyPopup() {
myPopupRelocate();
document.getElementById("styled_popup" ).style.display = "block";
document.body.onscroll = myPopupRelocate;
window.onscroll = myPopupRelocate;
setOpacity( 0 );
fadeInMyPopup();
}
</script>