[Résolu] Image apres passage de souris

Salut à tous et toutes, en reprenant le code du toturiel "Afficher / Masquer des "calques" sans javascript" situé à cette page j'ai voulu faire un affichage d'image apres un survol de souris sur un lien.
Mon tableau est généré automatiquement et je voudrait avoir lors du survol du titre une image qui apparait sur la droite.
Pour le 1er lien pas de problème par contre pour les autres C plus compliqué car :
Si je met position absolue l'image est toujours en haut à droite
Si je met position relative en apparaissant l'image décale tout les autres texte...
Le plus simple si vous voullez voir mon code complet : http://paste.pausephp.net/47
Si quelqu'un à une idée je suis prenneur
Modifié par Madmax (09 Oct 2006 - 16:09)

Bonjour,

Il est normal que tes boites images soient affichées en haut à droite.

On donne les coordonnées du coin supérieur gauche d'une boite positionnée en absolu avec les propriétés top et left.

La référence est le coin supérieur gauche de son plus proche parent positionné ou de la boite body si aucun parent n'est lui-même positionné.

Dans ton cas, aucun élément parent n'est positionné, donc le jeu de coordonnées top:10px, left 600px est calculé par rapport au coin supérieur gauche de la boite body.

Pour résoudre ton problème il suffit de ne pas utiliser de propriété top et left, ta boite image bien que retirée du flux sera réaffichée à sa position initiale, en loccurence dans la boite td qui la contiens, juste après le lien qui la précède.

Si tu à besoin de gérer ce positionnement tu pourras le faire avec des propriété de marge : margin-top, margin-left.

Comme une boite en positionnement absolu est totalement retiré du flux, aucun espace d'affichage ne lui est réservé, elle va simplement s'afficher "là où elle est" en se superposant aux boites adjacentes.

Pour le positionnement relatif :

Le positionnement relatif permet simplement de décaler verticalement et horizontalement une boite par rapport à sa position initiale.

Mais la boite n'est pas retirée du flux et doit donc occuper tout l'espace nécessaire à son affichage y compris en "agrandissant" la boite qui la contient.

Le décalage que tu observes est la conséquence de la propriété display:none qui supprime provisoirement cet espace mais le réaffiche dés lors que tu fais apparaitre la boite.

D'où le décalage, qui n'en est pas un...

Jean-Pierre

Excellent ! Cela fonctionne parfaitement !
Merci beaucoup pour ton aide et tes explications très claires !!!

Bravo
Tu considères que ce sujet est [Résolu] ?

oui !