Adapter une légende à la largeur de l'image.......[resolu]

Bien le salut a vous ......
Voila en voulant réalisé le tuto "Adapter une légende à la largeur de l'image" j'eu un problème avec le dimensionnement de l'image celle si est de 300/300px elle s'adapte a la largeur du bloc qui lui est réservé soit 200px mais en cliquant dessus elle ne reprend pas ces dimension réel (300/300px) comme dans le tuto.

voici le code en XHTML:

<table class="illustration"><tr><td>
<img src="3d.png" alt="" />
<p>
<strong>image en trois dimensions</strong>,<br/>
@ adel chenouf
</p>
<p>
La synthèse d'image 3D souvent abrégée 3D
</p>
</td></tr></table>


le code CSS:

.illustration {
display: table;
width: 200px;
float: right;
color: white;
padding: 10px;
background-color: #071d9f;
border: 1px; solid black;
}

en rappellant que j'utilise fire fox comment navig et ifrance comme hebergeur.

amicalement adel
Modifié par adel01 (10 Jan 2009 - 04:29)

Hello adel,

à noter que le petit effet sur l'image ne sert qu'à démontrer que la légende s'adapte mais il n'est pas directement lié au tuto.

Pour te répondre, il s'agit d'un peu de JavaScript :

<img width="300" onclick="width=='200' ? width='300' : width='200';" alt="" src="image.jpg" />

L'effet au clic sert effectivement à démontrer que la largeur du conteneur de l'image (et de la légende qui l'accompagne) s'adapte bien à la largeur de l'image. Cet effet ne fait pas partie du «cahier des charges» du tutoriel, que je permet de citer:

a écrit :
Comment réaliser un bloc d'illustration avec une image et une légende qui respecterait les deux critères suivants: premièrement, le bloc doit s'adapter à la largeur de l'image; deuxièmement, le texte donné en légende ne doit jamais dépasser l'image en largeur, et passera sur plusieurs lignes si nécessaire. La solution de facilité serait de figer la largeur du bloc et de travailler toujours avec des images de mêmes dimensions. Mais les CSS nous permettent de faire preuve d'un peu plus de subtilité.

(...)

Je rappelle notre énigme: nous souhaitons créer un bloc d'illustration composé d'une image de largeur variable et d'un texte de légende le longueur variable. Quelle est la manière la plus efficace pour répondre à ce cas de figure?