affichage dynamique d'un calque au survol d'une image

17 nov. 2006, 17:35

Bonjour,

me revoilà pour exposer un problème que j'aimerai résoudre :

Pour commencer j'ai un fichier en php qui répète une même image à chaque ligne d'un tableau. Lorsqu'on survole l'une de ces images générées dynamiquement, un calque "infobulle" en CSS devient visible. Le problème c'est que quelle que soit l'image survolée, mon calque garde la même position. Or j'aimerai qu'il se positionne à côté de l'image survolée.

Je ne sais pas si le problème vient de ma CSS ou de mon fichier PHP...

Voici la CSS :

Code : Tout sélectionner

a.infobulle {
text-decoration: none;
}

a.infobulle:hover {
background: none;
}

a.infobulle span {
display: none;
}

a.infobulle:hover span {
display:inline;
position:fixed;
top:180px;
left:40px;
width:110px;
height:25%;
background-color:#E8D3A0;
border:2px;
border-color:#7E662C;
border-style:solid;
padding:5px;
text-align:center;
padding-top:220;
font-size:12px;
font-weight:bold;
font-family:Geneva, Arial, Helvetica, sans-serif;
color:#000000;
}

... Et le fichier PHP :

<?php
while ($resultat=mysql_fetch_array($ma_requete)){

	echo '	<tr>';
					if ($resultat['pseudos']=="admin") {
						echo '<td height="1"></td>';
					}
					else {
						echo '<td bgcolor="'.$color.'"><a href="isoljoueur.php?pseudos='.$resultat['pseudos'].'" class="infobulle"><img src="../images/picto_village_out"><span>Voir les villages de ce joueur</span></img></a></td><td bgcolor="'.$color.'">'.$resultat['pseudos'].'</td>';
					}


...
?>

Voilà, si vous avez une solution à me proposer, je suis preneur. A mon avis le problème vient bien de ma CSS, mais bon, quand on est pas sûr on demande !

Merci pour votre attention.

17 nov. 2006, 17:48

Je dirais que pour commencer, laisse le PHP de coté pour le moment : pars de la source HTML, et mets au point ta feuille de style : quand ce sera prêt et fonctionnel, alors il sera temps d'intégrer ça au PHP, pas avant.

Et dans cette optique, ton code PHP n'aide pas, mets-nous une illustration du code HTML produit avec les explications qui vont bien, ce sera plus facile pour te répondre.

J'ajoute que si tu as une page en ligne avec ça, ce sera encore plus facile et on pourra visualiser et tester certaines possibilités.

17 nov. 2006, 18:07

Mon problème est résolu !

J'ai changé ma CSS par ceci :

Code : Tout sélectionner

a.infobulle:hover span {
display:inline;
position:absolute;
width:50px;
background-color:#E8D3A0;
border:2px;
border-color:#7E662C;
border-style:solid;
padding:5px;
text-align:center;
font-size:12px;
font-weight:bold;
font-family:Geneva, Arial, Helvetica, sans-serif;
color:#000000;
}

Et à présent mes info-bulles se positionnent précisemment à côté des images.

Bon, voilà une bonne chose de faite... M'en vais cuire mes harengs maintenant !

affichage dynamique d'un calque au survol d'une image

Qui est en ligne