Discussion :

[bguiller]

Bonjour à tous,

Je suis en train d'incorporer à mon site l'excellent "MENU HORIZONTAL DEROULANT 3" dont voici le lien :
http://css.developpez.com/galerie/?p...orizontaux#MH4

Je souhaite remplacer les menus du haut (textes placés dans des balises SPAN), par des images :

>Affichage initial = "image 1" (à la place du texte "menu1" dans la démo).

>Lors du survol d' "image 1" et pendant tout le décompte,
je souhaiterais afficher une "image 2".
(à la place du fond bleu placé sour le texte dans la démo).

>Puis retour à l' "image 1" à la fin du décompte.

>> Cela ne fonctionne pas quand je remplace directement les textes
(menu 1, menu2 etc...) par des images.
Après de nombreux essais infructueux en modifiant le CSS et le JS, je n'ai pas trouvé de solution.

Quelqu'un aurait-il une solution/suggestion à me soumettre ?

Merci par avance,
Bertrand

[Auteur]

bonjour,

voici la solution :
code CSS : tu n'as rien à changer

code HTML :
Dans le div id="menu" remplace les span par des balises img

Code html :

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

1
2
3
4
5
 
<img src="images/i1.gif" class="styleOutMenu" onmouseover="mouseOverMenu(this, 'itemMenu1', 'images/i1Over.gif')" />
<img src="images/i2.gif" class="styleOutMenu" onmouseover="mouseOverMenu(this, 'itemMenu2', 'images/i2Over.gif')" />
<img src="images/i3.gif" class="styleOutMenu" onmouseover="mouseOverMenu(this, 'itemMenu3', 'images/i3Over.gif')" />
<img src="images/i4.gif" class="styleOutMenu" onmouseover="mouseOverMenu(this, 'itemMenu4', 'images/i4Over.gif')" /

et ajoute comme argument à la fonction mouseOverMenu() le chemin de l'image qui sera affichée pendant le mouseOver (ici ce sont les images i1Over.gif, i2Over.gif, etc.


Code javascript :
* Ajoute une variable globale oldImg :

Code javascript :

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

1
2
3
4
5
6
7
 
var oldItem = null;
var oldMenu = null;
var timer = null;
 
// Ajout de oldImg
var oldImg = null;

* Ajoute un argument à la fonction mouseOverMenu, ici srcImgOver :

Code javascript :

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

1
2
 
function mouseOverMenu(menu, idItem, srcImgOver)

* Ligne 30 du code JS modifie le contenu de la condition comme suit :

Code javascript :

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

1
2
3
4
5
6
7
8
 
 /* on redonne le style par defaut de l ancien menu selectionne */
 if (oldMenu!=null && oldMenu!=menu)
 {
    //oldMenu.className = "styleOutMenu";
	oldMenu.src = oldImg;
    oldMenu = null;
 }

* puis en dessous :

Code javascript :

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

1
2
3
4
5
 
 /* style du menu selectionne */
 //menu.className = "styleOverMenu";
 oldImg = menu.src; // mémorisation de l'image du menu
 menu.src = srcImgOver; // on remplace l'image du menu survolé par l'image passée en argument

* Dans la fonction mouseOutT() ajoute dans le if (oldMenu!=null) cette ligne de code : oldMenu.src = oldImg; et mets
oldMenu.className = "styleOutMenu"; en commentaires

Code javascript :

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

1
2
3
4
5
6
7
 
 if (oldMenu!=null)
 {
    //oldMenu.className = "styleOutMenu";
	oldMenu.src = oldImg;
    oldMenu = null;
 }

tout est dans la pièce jointe

[bguiller]

ENORME merci pour cette réponse d'une grande clareté, et pour le temps que tu y as passé !
+ désolé de ne pas avoir répondu plus tôt (...en déplacement).
Cordialement,
Bertrand

[Auteur]

de rien

Tu peux télécharger la pièce jointe pour avoir le code complet (HTML+CSS+JS).