opacity, class VS id ou class VS class

Version imprimable

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:

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:

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:

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:

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:

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 !

31/01/2011, 18h30
NoSmoking

Bonjour,
Rappel : Les ID doivent être unique
Partant de cela il te faut modifier la className par ajout de style spécifique.
31/01/2011, 19h17
Celadon
Bonsoir,
L'ID est unique (il n'y a qu'une seule "page courante"). Je crois que le problème vient du fait qu'il y a, pour le même élément, une classe :
Code:

1 2 <li class="elem_menu">élément de menu</li>
et en même temps un id (id="actif") qui est ajouté par le script en JavaScript. C'est un peu comme si j'écrivais :
Code:

1 2 <li class="elem_menu" id="actif">élément de menu affiché</li>
Du coup comme l'un dit "opacity: 0.5" et l'autre "opacity: 0.9", le brave navigateur ne sait trop à quel saint (class / id) se vouer. J'aurais préféré qu'il se vouât à l'id, mais il semble choisir la class.
31/01/2011, 19h43
NoSmoking

Citation:

L'ID est unique (il n'y a qu'une seule "page courante").

je te fais confiance
logiquement cela devrait marcher, à quel moment appelles tu la fonction?
31/01/2011, 22h24
Celadon
En bas de page, comme dans le modèle que j'ai suivi :
Code:

1 2 3 <script type="text/javascript" src="SelectMenu.js"> </script> </body>
À vrai dire, ce que je cherche c'est quelque chose qui me permette d'appliquer un style différent, dans le menu, à la page en cours, comme expliqué ici. Sauf que son modèle ne prend pas les URL du type index.php?page=accueil, d'une part, et que par ailleurs je veux que le style appliqué soit le même qu'habituellement, avec une opacité différente. Le même qu'en :hover, "tout simplement".
31/01/2011, 23h10
NoSmoking

dans une URL de ce type index.php?page=accueil, il te faut récupérer
document.location.search, qui te retourneras ?page=accueil, et c'est à partir de cela qu'il te faut faire la recherche dans tes liens.
Si l'occurrence est trouvée tu appliques une classe active, sinon tu appliques une classe inactive
01/02/2011, 13h04
Celadon

Le script sélectionne très bien, là n'est pas le problème : le problème est dans son action après sélection.
J'envisage une nouvelle solution, inspirée par ce que vous me dites : au lieu d'appliquer un style "par défaut" puis d'appliquer un second style par-dessus le premier, il faudrait un script qui applique tout seul le style, une sorte de structure
IF page-courante > style actif ELSE > style inactif

Je ne sais pas du tout faire ça : comme je l'ai dit, j'ai simplement récupéré un script et essayé de l'adapter à mon usage.

Question corollaire, parce que ça me simplifierait la vie : on ne peut pas créer une pseudo-classe en JavaScript ? Parce que je sais que :active et :current ne correspondent pas à ce que je veux faire, mais si par exemple je pouvais inventer une pseudo-classe :encours, que j'appliquerais à la page active, avec quelque chose comme

Code:

document.links[i].pseudoClass = 'encours';

ça serait assez simple, je crois. Mais je ne sais pas d'une part créer la pseudo-classe, et d'autre part l'appeler, la sélectionner en JS (mon "pseudoClass" que j'ai mis en gras n'existe pas, que je sache...)

Citation:

Question corollaire, parce que ça me simplifierait la vie : on ne peut pas créer une pseudo-classe en JavaScript ? Parce que je sais que :active et :current ne correspondent pas à ce que je veux faire, mais si par exemple je pouvais inventer une pseudo-classe :encours, que j'appliquerais à la page active, avec quelque chose comme

les pseudo-classes ne se créent pas elles existent.

Je te mets un exemple complet correspondant à ce que je te disais lors de mon dernier message

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS style sur lien Menu</title>
<style type="text/css">
#menu a{
  font-family :  Verdana, Arial;
  width : 200px;
  line-height : 25px;
  display : block;
  text-decoration : none;
}
.lien_inactif {
  color : #000;
  font-weight : bold;
  font-size : 18px;
  font-style : italic;
  background-color : #f0f0f0;
}
.lien_actif {
  background-color : #ffffff;
  font-size : 15px;
}
a.lien_actif:hover {
  color : #00f;
  background-color : #e0e0e0;
}
</style>
</head>
<body>
<ul id ="menu">
  <li><a href="page_test_url.html?index=acceuil">Acceuil</a></li>
  <li><a href="page_test_url.html?index=contact">Contact</a></li>
  <li><a href="page_test_url.html?index=news">Toutes les news</a></li>
</ul>
 
<script type="text/javascript">
if( window.location.search){
  // recup parametre
  var sParam = window.location.search;
  // recup element menu
  var oMenu = document.getElementById('menu');
  // recup des liens
  var oLien = oMenu.getElementsByTagName('a');
  // parcours des liens
  for( var i=0, nb=oLien.length; i<nb; i++){
    // si contient le paramatre
    if( oLien[i].href.indexOf( sParam) > -1){
      //affecte la class
      oLien[i].className = "lien_inactif";
      // desative le lien
      oLien[i].onclick = function(){return(false);}
    }
    else{
      //affecte la class
      oLien[i].className = "lien_actif";
    }
  }
}
</script>
</body>
</html>

je penses néanmoins qu'il serait plus intéressant de le faire directement coté serveur.

02/02/2011, 12h26
Celadon
Bonjour,
Et merci pour ce script ! Je viens de l’essayer, ça semble très bien fonctionner. Je vais maintenant essayer de l’appliquer dans mes propres pages, ce qui risque d'être un peu plus compliqué. Juste à titre indicatif, il y a un petit lapsus*: la classe appelée lien_inactif correspond en fait au lien actif, et lien_actif aux liens inactifs.
Petite question*: à quoi sert
Code:

1 2 // desative le lien oLien[i].onclick = function(){return(false);}
?
Par ailleurs, quand vous dites "côté serveur", vous voulez dire en PHP j’imagine*? Il y a tout un débat là-dessus pour savoir si c’est mieux côté serveur ou côté client, je crois que ça se fait aussi souvent de l’un que de l’autre...
Bon, et puis moi je me suis décidé à apprendre réellement le JavaScript, parce que mine de rien ça me manque. Ensuite je pourrai utiliser des jQuery*! :mrgreen:
Encore merci pour le script, je reviendrai (évidemment) vers vous si j’ai un problème au moment de l’appliquer dans mon site déjà un peu construit.
02/02/2011, 13h27
NoSmoking
Citation:

Bonjour,
Et merci pour ce script ! Je viens de l’essayer, ça semble très bien fonctionner. Je vais maintenant essayer de l’appliquer dans mes propres pages, ce qui risque d'être un peu plus compliqué. Juste à titre indicatif, il y a un petit lapsus*: la classe appelée lien_inactif correspond en fait au lien actif, et lien_actif aux liens inactifs.

l'option que j'ai choisi c'est de dire que la page est ACTIVE donc le lien qui méne vers elle est INACTIF
Citation:
Petite question*: à quoi sert

Code:

1 2 // desative le lien oLien[i].onclick = function(){return(false);}
cela sert justement à ce que le lien sous sa forme <A HREF="...."> ne soit pas lancé suite au clic, accidentel, sur celui ci.

Citation:

Il y a tout un débat là-dessus pour savoir si c’est mieux côté serveur ou côté client, je crois que ça se fait aussi souvent de l’un que de l’autre...

Il est plus propre de régler cela en PHP, donc coté serveur, en mettant un lien, donc <A HREF=""...">, pour les liens effectifs et un simple SPAN, par exemple, pour le lien mis en sommeil de la page active, même si c'est faissable en javascript.

Citation:

Bon, et puis moi je me suis décidé à apprendre réellement le JavaScript, parce que mine de rien ça me manque. Ensuite je pourrai utiliser des jQuery*!

c'est mieux de le faire dans ce sens...
02/02/2011, 14h25
Celadon

Citation:

Envoyé par NoSmoking

l'option que j'ai choisi c'est de dire que la page est ACTIVE donc le lien qui méne vers elle est INACTIF

D'accord, je comprends maintenant.

Citation:

Envoyé par NoSmoking

Il est plus propre de régler cela en PHP, donc coté serveur, en mettant un lien, donc <A HREF=""...">, pour les liens effectifs et un simple SPAN, par exemple, pour le lien mis en sommeil de la page active, même si c'est faissable en javascript.

Les deux options existent et son pratiquées y compris sur des sites assez renommés (A List Apart fait en JS je crois...).

Citation:

Envoyé par NoSmoking

c'est mieux de le faire dans ce sens...

Je veux dire, pas pour ça, le jQuery, mais pour des animations graphiques un peu plus développées...
02/02/2011, 15h47
NoSmoking

il n'empêche, à mon avis, qu'il vaut mieux connaître un minimum le javascript avant d'utiliser, et souvent mal, une bibliothèque comme jQuery.
03/02/2011, 10h48
Celadon

Tout à fait ! Nous sommes parfaitement d'accord ! Et c'est pour ça que je disais que j'avais commencé à apprendre le JavaScript pour pouvoir ensuite accéder à la bibliothèque jQuery.
Ah, j'aurais dû faire des études d'info...