Discussion :

[YoChappu]

Bonjour,

J'ai cr�� un menu (avec sous menus) en html. Voici � peut pr�s � quoi �a ressemble:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
 
<div>
<div>TITRE MENU</div>
<ul><li>Sous Menu 1</li>
<li>Sous Menu 2</li></ul>
<div>

Je cache mes sous menus gr�ce � la propri�t� css visibility:hidden.
Avec du JavaScript je pr�cise que:

- lorsque je survole ma <div> contenant mon "TITRE MENU", je change la couleur et je fais apparaitre mes sous menus (onMouseOver).
- lorsque je survole mes sous menus, je change la couleur et je fais en sorte de laisser mes sous menus affich�s (onMouseOver).
- lorsque je retire la souris de ma <div> principale (qui contient mon TITRE MENU et mes sous menus), je remets par d�faut (onMouseOut).

Sous Firefox et IE8 aucun soucis. En revanche sous IE7 et IE6 lorsque je passe la souris sur un menu et ses sous menus �a clignote...
J'ai essay� de mettre un timeout, rien n'y fait! Quelqu'un aurait il une solution � proposer??

Merci d'avance!

[devyan]

Salut,

C'est tout � fait normal...

Le test de "protection" de la modification dans changeFondBleu() n'est pas correct...

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
 
function changeFondBleu(menuG,menuM,menuD){
 
	if (!(document.getElementById(menuM).style.background=="transparent url(/https/www.developpez.net/images/mm-default.jpg) repeat scroll left bottom")) {
 
        document.getElementById(menuM).style.color="#fff";
        document.getElementById(menuG).style.background="url('/images/mg.jpg') bottom left";
        document.getElementById(menuM).style.background="url('/images/mm.jpg') bottom left";
        document.getElementById(menuD).style.background="url('/images/md.jpg') bottom left";
 
    }
}

"transparent url(/https/www.developpez.net/images/mm-default.jpg) repeat scroll left bottom" <> "url('/images/mm.jpg') bottom left"

[YoChappu]

Merci pour votre r�ponse mais �a ne change rien au probl�me... J'ai comment� mon mon "if" et le clignotement continue.

Cette condition me permet juste de ne pas changer la couleur bleue du menu en cours lorsque je fais un onMouseOut dessus (ne fonctionne que pour accueil pour l'instant).

Le background d'un menu actif est volontairement "images/mm-default.jpg" dans le cas de la div "mm"

[devyan]

Merci pour votre r�ponse mais �a ne change rien au probl�me... J'ai comment� mon mon "if" et le clignotement continue.

Cette condition me permet juste de ne pas changer la couleur bleue du menu en cours lorsque je fais un onMouseOut dessus (ne fonctionne que pour accueil pour l'instant).

C'est bien ce que je dis, ce test est NECESSAIRE
Mais il n'est pas correct et c'est pour �a que tu as le clignotement.

[YoChappu]

En quoi n'est il pas correct?

Je ne sais pas si vous avez vu, j'ai �dit� mon dernier message en ajoutant le commentaire suivant:

Le background d'un menu actif est volontairement "images/mm-default.jpg" dans le cas de la div "mm"

[devyan]

Il n'est JAMAIS vrai car tu compares 2 chaines qui sont diff�rentes.

"transparent url(/https/www.developpez.net/images/mm-default.jpg) repeat scroll left bottom" <> "url('/images/mm.jpg') bottom left"

[YoChappu]

D'ou l'int�r�t que je pr�cise que ce contr�le ne me sert qu'� v�rifi� si je suis actuellement en train de parcourir le menu actif.

En gros je dis:

Si je ne suis pas dans le menu actuellement actif (avec le fond "/images/mm-default.jpg"), dans ce cas lorsque je fais un onMouseOver je remet le menu en blanc.

Prenons le cas ou je parcours justement le menu actif, je rentre dans la condition car mon menu actif aura toujours "/images/mm-default.jpg" comme background et non "/images/mm.jpg". Dans ce cas lorsque je quitte l'�l�ment, je ne change pas sa couleur afin qu'il reste bleu.

Je pr�cise que seul le bouton accueil est concern� pour le moment.

[devyan]

D'ou l'int�r�t que je pr�cise que ce contr�le ne me sert qu'� v�rifi� si je suis actuellement en train de parcourir le menu actif.

En gros je dis:

Si je ne suis pas dans le menu actuellement actif (avec le fond "/images/mm-default.jpg"), dans ce cas lorsque je fais un onMouseOver je remet le menu en blanc.

Prenons le cas ou je parcours justement le menu actif, je rentre dans la condition car mon menu actif aura toujours "/images/mm-default.jpg" comme background et non "/images/mm.jpg". Dans ce cas lorsque je quitte l'�l�ment, je ne change pas sa couleur afin qu'il reste bleu.

Je pr�cise que seul le bouton accueil est concern� pour le moment.

Le bout de code que tu fournis dit :
si je n'ai pas couleur de fond = transparent ET image = "/images/mm-default.jpg" ET scroll ET r�p�t�e en X et Y � partir du coin bas gauche ALORS je fixe image ="/images/mm.jpg" ET positionn�e � partir du coin bas gauche.

donc tu vas toujours effectuer la modification du background donc tu vas avoir le fond qui clignote � chaque affectation sous IE6 et IE7 et c'est normal.

[YoChappu]

J'ai modifi� mes contr�les javascript et mis en place le syst�me de coloration du menu courant afin que �a paraisse plus clair pour tout le monde.

Mais je ne vois pas ce que �a change et ce qu'il faudra que j'�crive comme code pour arr�ter le clignotement... Mon contr�le me sert uniquement � ne pas changer le "background" de mon menu actif...

[devyan]

J'ai modifi� mes contr�les javascript et mis en place le syst�me de coloration du menu courant afin que �a paraisse plus clair pour tout le monde.

Mais je ne vois pas ce que �a change et ce qu'il faudra que j'�crive comme code pour arr�ter le clignotement... Mon contr�le me sert uniquement � ne pas changer le "background" de mon menu actif...

Essaye d'ajouter ceci, regarde ce qu'il t'affiche et normalement tu devrais comprendre...

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
function changeFondBleu(menuG,menuM,menuD){

    alert(document.getElementById(menuM).style.backgroundImage);

    if (!(document.getElementById(menuM).style.backgroundImage=="url(/images/mm-default.jpg)")) {

        document.getElementById(menuM).style.color="#fff";
        document.getElementById(menuG).style.background="url('/images/mg.jpg') bottom left";
        document.getElementById(menuM).style.background="url('/images/mm.jpg') bottom left";
        document.getElementById(menuD).style.background="url('/images/md.jpg') bottom left";

    }
}

[YoChappu]

C'est fait et le probl�me persiste toujours... Je ne suis pas le seul � ne pas comprendre, mes coll�gues aussi.

Vous semblez avoir compris la source du probl�me, serait-il possible que vous me donniez le code que vous pensez �tre le bon? Car la je ne vois vraiment pas...

Merci d'avance

[devyan]

C'est normal que le probl�me persiste...

Ce n'est pas en ajoutant un message d'alerte que cela peut r�soudre le bug.

A moins que la fonction que je suis all� p�cher dans le fichier joint � la page html mise en lien dans ton premier message ne soit pas le bon ...

(mais dans ce cas, le mieux �a aurait �t� de nous donner toutes les billes sur ce forum)

... Tu compares des cha�nes diff�rentes.

Je vais sch�matiser ton code :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
function montest(A,B,C) {
    if (!(document.getElementById(B).style.backgroundImage=="url(/images/mm-default.jpg)")) {
        document.getElementById(B).style.background="url('/images/mm.jpg') bottom left";
    }
}

Maintenant je ne vois pas comment je peux m'exprimer diff�remment.
Si quelqu'un d'autre veut s'y coller ...

[YoChappu]

Je me doute bien qu'un alert ne change rien ^^ Ce que je voulais dire par l� c'est que j'ai beau avoir essay� de suivre votre logique par des modifications, le r�sultat est toujours le m�me

Avez vous bien vu le "!" lors de mon contr�le?

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
function montest(A,B,C) {
    if (!(document.getElementById(B).style.backgroundImage=="url(/images/mm-default.jpg)")) {
        document.getElementById(B).style.background="url('/images/mm.jpg') bottom left";
    }
}

Pour que ce soit plus clair je l'ai modifi� de la mani�re suivante:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
function changeFondBleu(menuG,menuM,menuD){
 
    if (document.getElementById(menuM).style.backgroundImage!="url(/images/mm-default.jpg)") {
 
        document.getElementById(menuM).style.color="#fff";
        document.getElementById(menuG).style.background="url('/images/mg.jpg') bottom left";
        document.getElementById(menuM).style.background="url('/images/mm.jpg') bottom left";
        document.getElementById(menuD).style.background="url('/images/md.jpg') bottom left";
 
    }
}

[devyan]

Pouvez-vous nous donner ici le texte du message obtenu avec l'alerte que je vous ai demand� de tester ?

if (A != 'B') {
A = 'C'
}

C'est toujours vrai car 'B' est toujours diff�rent de 'C'

[YoChappu]

D�sol� j'ai compl�tement oubli� de pr�ciser... En fait pour mon menu en cours j'applique le background suivant � partir d'une fonction:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

style="background:url('/https/www.developpez.net/images/mm-default.jpg') bottom left;"

Si je reprends votre sch�ma, parmi mes menus, celui qui est actif est �gal � B justement.

exemple avec le menu 3 actif:

Si on consid�re que:
style=C correspond � un fond blanc
style=B correspond au fond par d�faut (bleu dans mon cas)

MENU1 (style=B), MENU2 (style=B), MENU3 (style=C), MENU4 (style=B)

Donc il arrive que A=B lors du contr�le...

[devyan]

Pouvez-vous nous donner ici le texte du message obtenu avec l'alerte que je vous ai demand� de tester ?

"url('/images/mg-default.jpg')" <> "url(/images/mm-default.jpg)"

[YoChappu]

alert sur le menu actif: url(/https/www.developpez.net/images/mm-default.jpg)

alert sur les autres menus: url(/https/www.developpez.net/images/mm.jpg)


D�sol� faute de frappe dans ma derni�re r�ponse

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

style="background:url('/https/www.developpez.net/images/mm-default.jpg') bottom left;"