Discussion :

[bdmax]

Bonjour,

Présentation rapide:
Nouvel arrivant sur le forum, nouveau en javascript et css, site perso en .NET C#

Ce que j'ai fait:
J'ai mis en place une page HTML contenant un tableau qui contient une image par ligne.
Lorsque l'on passe la souris sur l'image celle-ci est zoomée afin de la voire en grand.

Voici ma question:
Comment faire pour que la ligne du tableau contenant l'image ne soit pas agrandie en même temps que l'image ?

Comment faire comprendre a la page HTML que le tableau doit resté inchangé, mais que l'image doit s'afficher au dessu des autres lignes ?

Merci pour vos réponses.

[Sacha999]

Met ton image dans une "div" (qui lui sera dans le <td>) avec comme style height à ne pas depasser et le style overflow a visible

Exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<div style="height:40px;overflow: visible"><img src="tonimage.jpg"><div>

Par contre il depassera vers le bas et la droite, apres si tu veux le centrer, faut passer par des "position:absolute" et un calcul de coordonnée, bonne chance

[bdmax]

ça marche du tonnerre !

C'est exactement ce que je souhaitais obtenir.

Un grand merci.

@+

[bdmax]

Super sous firefox, mais ne semble pas être compatible avec IE 6.0.

Quelqu'un a une idée ?

Merci

[le_chomeur]

au moment ou tu passe sur ton image , passe sa propriété en style="position:absolute" , et chacune des cellule doit avoir comme propriété style="position:relative"

sinon , tu met une div dans tes céllules, et celle ci en position relative et l'image en absolute

[bdmax]

Impeccable, ça fonctionne pour les deux !

Mais je n'ai pas compris pourquoi ça corrige le problème.
Quel est le rapport entre le fait que ma ligne soit agrandi et la position relative ou absolute de l'image ?

[le_chomeur]

explication

le fait de mettre la div en relative, va permettre d'indiquer aux élément qui se trouveront a l'intérieur de celle ci qu'il se possitionneront par rapport a elle et non par rapport a son parents /!\

ensuite en mettant en position absolute , on fait sortir du flux normal le contenant ( ici ton image ) ce qui fait que quelque soit la taille de ton image , elle sera positioné par rapport a ta div ET ne déformera pas le reste puisqu'elle n'intervient pas sur le reste du contenu ( grace a la position absolute )

pour testé retire le relative de la div => l'image sera positionné tout en haut a gauche

retire le absolute et la ton tableau sera déformé