Bonjour à tous,
Je développe en ce moment un petit site web. J'ai un menu : c'est une liste <ul></ul>. Chaque élément de menu a un arrière plan dont l'opacité est moyenne :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
 
.elem_menu {
	background-color: #FFD6AE;
	opacity:0.5; 
        filter : alpha(opacity=50);
}
Quand je passe sur un élément, l'opacité augmente :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
 
.elem_menu:hover {
	opacity:0.9; 
        filter : alpha(opacity=90);
}
Tout cela fonctionne.

Maintenant, j'ai aussi un script en JS qui repère l'adresse de la page courante, compare les href des liens avec cette adresse et, si le lien a la même adresse que la page courante, lui applique un id, qui s'appelle "actif". Or ce que je voudrais, c'est que cet id soit caractérisé par une opacité élevée, comme :hover :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
 
#actif {
	opacity:0.9; 
        filter : alpha(opacity=90);
}
Eh ben ça marche pas. Il garde toujours l'opacité première, 0.5 ou 50, selon ce que vous lisez.
Alors vous me direz "est-ce qu'avec d'autres propriétés ça fonctionne ?" et la réponse est oui. J'ai pu, par exemple, changer la couleur de police, la couleur de l'arrière plan, etc.
Autre solution : le script JS crée une classe, par exemple menuselected :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
 
.menuselected {
	opacity:0.9; 
        filter : alpha(opacity=90);
}
Le résultat est le même, c'est à dire rien de concluant.

Je pense que le script ne remplace pas la classe par une autre, mais ajoute une 2e classe, ou un id. (Si c'est possible.)

Voici donc le script :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function highlightMenu(){
var cettePage = document.location.href;
//pour eviter les liens internes
if(cettePage.indexOf('#') != -1)
   cettePage = cettePage.substring(0,cettePage.indexOf('#'));
 
for(var i=0;i < document.links.length;i++){
 
    var lien = document.links[i].getAttribute('href');
	//IE retourne l'url total du lien tandis que NS retourne que l'attribut href
	//on contourne le probléme en comparant les derniers caractères
    if( cettePage.substring(cettePage.length-lien.length,cettePage.length) == lien ){
         document.links[i].id = 'actif';
    //cas de la homepage appelée depuis la racine /
    }else if( (document.location.pathname == '/') && ( (lien.substring(0,6) == 'index.') || ( (cettePage + 'index.') == lien.substring(0,cettePage.length + 6) ))){
         document.links[i].id = 'actif';	
    }
}
}
highlightMenu();
Il n'est pas de moi. Je suis juste capable de moditier ".id = 'actif' " en '.className = 'menuselected' "...

Au départ dans mes styles, il y avait aussi du padding, mais le padding de la class et le padding (ou non) de l'id (ou le padding des deux classes) s'ajoutaient, alors ça n'allait pas.

Voilà, si vous avez des idées sur toutes ces petites choses... Merci d'avance !