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(/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(/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(/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('/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(/images/mm-default.jpg)

alert sur les autres menus: url(/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('/images/mm-default.jpg') bottom left;"