Javascript : menu déroulant
Hors ligneFulltrip Le 26/03/2008 à 12:34 Profil de Fulltrip Configuration de Fulltrip

Bonjour, voilà j'ai un problème à l'affichage de mes images.
en fait c'est pas exactement l'affichage qui ne fonctionne pas mais la fonction que je leurs ai appropriées.
Mon souhait était d'afficher 5 images les unes à la suite des autres et lorsqu'on passeraient dessus à l'aide d'une fonction Javascript OnmouseOver celles-ci s'agrandiraient et que lorsqu'on cliquerait dessus, elle nous amènerait à une autre page, grâce à un simple lien en fait.
J'ai tout d'abord fait un essai sur une seule image, cela marchait parfaitement.
Cependant lorsque je rajoutais les autres images cela ne se faisait plus.
Voici mon code dans un premier temps:



<a href="page.html" onMouseOver="document.img_1.src='images/carre1.png';" onMouseOut="document.img_1.src='carre2.jpg';">
<img class="img" name="img_1" src="carre2.jpg"> </a>



Là, ça marche, mais lorsque je fais ceci, cela ne marche plus:



<a href="page.html" onMouseOver="document.img_1.src='images/carre1.png';" onMouseOut="document.img_1.src='carre2.jpg';">
<img class="img" name="img_1" src="carre2.jpg"> </a>
<a href="page.html" onMouseOver="document.img_1.src='images/carre1.png';" onMouseOut="document.img_1.src='carre2.jpg';">

<img class="img" name="img_1" src="carre2.jpg"> </a>
<a href="page.html" onMouseOver="document.img_1.src='images/carre1.png';" onMouseOut="document.img_1.src='carre2.jpg';">

<img class="img" name="img_1" src="carre2.jpg"> </a>
<a href="page.html" onMouseOver="document.img_1.src='images/carre1.png';" onMouseOut="document.img_1.src='carre2.jpg';">

<img class="img" name="img_1" src="carre2.jpg"> </a>
<a href="page.html" onMouseOver="document.img_1.src='images/carre1.png';" onMouseOut="document.img_1.src='carre2.jpg';">

<img class="img" name="img_1" src="carre2.jpg"> </a>


J'ai d'abord cru que c'était à cause du css, c'était pas ca, je les ai ensuite intégré dans un tableau, cela ne marchait pas non plus, j'ai changé les images, idem...

Merci d'avance pour votre aide.
Hors ligneAnthony Le 26/03/2008 à 18:45 Profil de Anthony Configuration de Anthony

Fou du volant
Salut

Justement en ce qui me concerne j'aurais plutôt fait ça avec du CSS, ça serait plus léger ;)

<style type="text/css">
.imgb{
wdth:50px;
}
.imgb:hover{
width:500px;
}
</style>

<p>
<a href="lien.php"><img class="imgb" src="image1.png" alt="" /></a> <a href="lien2.php"><img class="imgb" src="image2.png" alt="" /></a></p>


etc ;)
--

Hors ligneFulltrip Le 27/03/2008 à 09:51 Profil de Fulltrip Configuration de Fulltrip

Re!

Merci, cela m'a été très utile à l'alignement des images et à l'agrandissement, mais après avoir tout réalisé comme je le voulais, cela marchait comme d'habitude sur Firefox mais pas sur IE, y'aurait-il  un moyen de faire en sorte qu'il marche sur les deux?

Merci d'avance.
Hors ligneAnthony Le 27/03/2008 à 16:41 Profil de Anthony Configuration de Anthony

Fou du volant
Le code CSS que je t'ai fourni est tellement simple qu'il devrait fonctionner sur les deux navigateurs. Peux-tu copier-coller le code source de ta page web qui ne fonctionne pas sur IE ?

EDIT : ah oui je sais, c'est le imgb:hover qui ne fonctionne pas.

On va ruser :


<style type="text/css">
.imgb img{
wdth:50px;
}
.imgb:hover img{
width:500px;
}
</style>

<p>
<a href="lien.php" class="imgb"><img src="image1.png" alt="" /></a> <a href="lien2.php" class="imgb"><img src="image2.png" alt="" /></a></p>


Ca fonctionne ?
--

Hors ligneFulltrip Le 27/03/2008 à 19:24 Profil de Fulltrip Configuration de Fulltrip

Re,

merci de ton aide même si elle ne m'apporte finalement pas grand chose car lorsqu'on passe la souris dessus et que l'image s'agrandit, le contenu se déforme.
De plus l'image qui précède l'autre la pousse lorsqu'elle s'agrandit.
J'ai donc mit tout cela dans un tableau de cette forme:


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

                                          </tr>
                                      </table>




J'ai utilisé un code vraiment basique.
Mon idée de départ était en fait que lorsqu'on passait avec la souris sur une image, un menu vertical s'afficherait.

En fait on pourrait dire que les photos forment un menu horizontal déroulant.

j'ai donc fait un menu déroulant:


window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
     for (var i = 1; i<=10; i++) {
          if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
     }
if (d) {d.style.display='block';}
}


mon code javascript.


<div id="menu">
          <dl>               
          <dt id="dt1" onmouseover="javascript:montre('smenu1');">
Accueil</dt>
               <dd id="smenu1">

                    <ul>
                         <li>
<a href="#">Sous-Menu 1.1</a></li>

                         <li><a href="#">Sous-Menu 1.2</a></li>
                         <li><a href="#">Sous-Menu 1.3</a></li>
                         <li><a href="#">Sous-Menu 1.4</a></li>
                         <li><a href="#">Sous-Menu 1.5</a></li>
                         <li><a href="#">Sous-Menu 1.6</a></li>
                    </ul>

               </dd>

     </dl>


et mon code XHTML dont j'ai mit qu'une partie pour ne pas me répété.Je vous épargnerai le css.
Ceci n'est qu'un simple menu déroulant.
Le gros problème c'est que je n'arrive pas a fusionner les deux script, c'est à dire remplacer  "Accueil" par une image qui grossirait quand la souris passerait dessus!!

LOL, je ne vous en voudrait pas si vous ne m'aidiez pas, c'est peut être pas faisable. En tout cas je n'y suis pas arrivé après plusieurs manipulations.
Peut être qu'il faut que je passe par un autre chemin je sais pas.
Hors ligneAnthony Le 27/03/2008 à 19:50 Profil de Anthony Configuration de Anthony

Fou du volant
Personnellement je n'utiliserai pas de javascript pour faire ça car ça rend ton site inaccessible ;)

Bref sinon :

<dt id="dt1" onmouseover="javascript:montre('smenu1');">Accueil</dt>

tu mets une image :

<dt id="dt1" onmouseover="javascript:montre('smenu1');"><img src=" ...." alt="" /></dt>
--

Hors ligneFulltrip Le 27/03/2008 à 19:58 Profil de Fulltrip Configuration de Fulltrip

lool! quand même j'y avais pensé à ce que tu m'as donné!!
mais 'image ne s'agrandira pas au passage de la souris.
Bon, bref c'est pas grave, merci quand même.
Hors ligneAnthony Le 27/03/2008 à 20:03 Profil de Anthony Configuration de Anthony

Fou du volant
Raison de plus pour faire ça en CSS :)

Ce que tu veux c'est :

  • Une image qui s'agrandit au passage de la souris
  • Quand tu passes la souris sur une image un menu qui s'affiche ?



Le tout sans déformation du contenu ? ça va être dur puisque l'image s'agrandit ...

--

Hors ligneFulltrip Le 27/03/2008 à 20:08 Profil de Fulltrip Configuration de Fulltrip

Ben je pense que c'est faisable, mais faudra que j'y mettes du temps, j'y étais presque quand j'avais fait un tableau.

je sais pas comment te faire visualiser la chose.
en fait c'est:

   - 5 images alignées les unes après les autres sans qu'elles soient collées entre elles (sinon lors de l'agrandissement elle pousserait ses copines)
   - au moment de l'agrandissement, c'est lorsque l'agrandissement est fait, un menu verticale vient s'accrocher à son pied.

Voilà.
Hors ligneAnthony Le 31/03/2008 à 20:57 Profil de Anthony Configuration de Anthony

Fou du volant
Plop Fulltrip, tu as résolu ton problème de menu ? j'ai pas eu trop le temps de regarder
--

Vous avez résolu votre problème avec VIC ? Faites-le savoir sur les réseaux sociaux !
Vulgarisation-informatique.com
Cours en informatique & tutoriels