Affichage menu déroulant au pied d'une image qui s'agrandit ^^

Bonjour, tout est dit dans le titre du sujet, je souhaite réaliser:

* Un alignement de 5 images
* L'image s'agrandit au passage de la souris
* Quand l'image a fini de s'agrandir un menu vertical s'afficherait au pied de l'image

Je sais j'ai de l'imagination!

Voilà, dans un premier temps, j'ai réalisé l'alignement des 5 images et que lorsque la souris passe dessus, l'image s'agrandit:

<p>
<a href="#"><img class="imgb" src="images/imprimerie2.png" alt="" /></a> 
<a href="#"><img class="imgb" src="images/serigraphie2.png" alt="" /></a>
<a href="#"><img class="imgb" src="images/impression2.png" alt="" /></a>
<a href="#"><img class="imgb" src="images/textile2.png" alt="" /></a>
<a href="#"><img class="imgb" src="images/decoration2.png" alt="" /></a>
</p>

Un premier problème:
Lorsque les images sont survolées par la souris, elles s'agrandissent bien, mais chaque fois que l'une grandit, celle-ci pousse toutes les autres et déforme de plus le contenu.

J'ai donc placé tout ça dans un tableau:

<table border="0" cellpadding="0">
                                          <tr valign="middle" align="center">
                                             <td width="160" height="170"><a href="#"><img class="imgb" src="images/imprimerie2.png" alt="" /></a> </td>
                                             <td width="160" height="170"><a href="#"><img class="imgb" src="images/serigraphie2.png" alt="" /></a></td>
                                             <td width="160" height="170"><a href="#"><img class="imgb" src="images/impression2.png" alt="" /></a></td>
                                             <td width="160" height="170"><a href="#"><img class="imgb" src="images/textile2.png" alt="" /></a></td>
                                             <td width="160" height="170"><a href="#"><img class="imgb" src="images/decoration2.png" alt="" /></a></td>

                                          </tr> 
                                      </table>

Avec quelques petits acharnements sur la taille des images et quelques réglages, tout marche nikel!

Mon souhait était donc que lorsque l'image s'agrandirait, au pied de l'image s'afficherait un menu vertical.
On peut donc dire que les 5 images forment un menu horizontal!

Quelqu'un aurait une idée de la façon de procéder pour créer ceci.

J'ai essayé longuement, tout d'abord en faisant un menu horizontal déroulant en intégrant les images sur chaque onglet, je suis jamais arrivé à bout de ce que je voulais faire!!
Toujours quelque chose qui déconnait. J'y était pourtant presque arrivé!!

Merci d'avance pour tout aide que chacun pourrait m'apporter!

Salut,

Je ne suis pas sur d'avoir tout saisi, pourrais tu nous fournir quelques schéma de ce que tu veux faire, état au repos et au survol pour se rendre mieux compte ?

Salut Mikachu,

Ben je sais pas comment t'expliquer mieux mon problème!
Je n'ai pas hébergé mon site donc je ne peux te faire voir ce que j'ai fait.

Ben, il suffit en fait de visualiser, il y a 5 images aligner au centre de ma page web, la largeur de ma page est 780px..
Sur chaque image j'y est inséré un lien, voici le code:

<p>

<a href="#"><img class="imgb" src="images/imprimerie2.png" alt="" /></a> 
<a href="#"><img class="imgb" src="images/serigraphie2.png" alt="" /></a>
<a href="#"><img class="imgb" src="images/impression2.png" alt="" /></a>
<a href="#"><img class="imgb" src="images/textile2.png" alt="" /></a>
<a href="#"><img class="imgb" src="images/decoration2.png" alt="" /></a>

</p>

Mais j'ai déjà un premier problème, enfin si on peut appeler ça un problème!
c'est lorsque qu'une image s'agrandit elle pousse celles qui se trouve sur le côté.

Et je voudrais en fait, que lorsqu'une image s'agrandit par le passage de la souris, un menu vertical s'affiche comme sur cette page:

http://css.alsacreations.com/xmedia/exemples/deroulant/menu-horizontal2.htm

En fait c'est comme si sur la page où je t'ai donné le lien, une image représentait un onglet "menu1", "menu2".

Tu vois un peu plus ce que je veux dire?

Merci pour ton aide

Salut,

Si j'ai bien tout compris
modifier les <dt> du code du tuto :

		<dt onmouseover="javascript:montre('smenu1');"><img src="mon_image.jpg" alt="toto"</dt>

Et peut être un poil la css

#menu dl {
float: left;
width: 9em;/* à déterminer en fonction du width de ton image*/
margin: 0 1px;
}
#menu dl img{
display: block;/*pour éviter les espaces non désirés*/
width: 93px;/* le width de ton image*/
margin: 0 auto;/*centrer l'image au cas ou on agrandisse la police*/
}

Voilou je crois bien

Bon c'est pas grave!

Vous comprenez pas ce que je dis...

Pour ça il n'y avait pas de problème.
Là tu as seulement inséré une image à la place de l'onglet!mais merci quand même!

Je pense que cela doit être possible mais il faut certainement avoir un certain niveau en programmation pour pouvoir le faire.

Peut être, dans quelques mois j'arriverai à le faire!

Bonjour,

Je crois que c'est toi qui n'a pas compris.
Si tu ajoutes une ligne ou deux à son CSS (ou à son JS pour la compatibilité IE), tu as ce que tu cherches.

A savoir, en plus d'ajouter "display: block" à un "dd", on pourrait ajouter un "width: 105px" à un img...