Menu en onglets avec image éclaircie pour l'onglet sélectionné

[Lunaa]

Bonjour a tous !

Tout d'abord, je suis désolée si cette question a déjà été posée, mais je chercher depuis samedi sans trouver quelque chose qui me va +___+
Mon forum est en phpBB2

Comme spécifiée dans le titre, j'ai fait un menu en onglet pour la PA de mon forum et je cherche a avoir l'image de l'onglet sélectionné en plus clair. Soit en mettant des filter soit en changeant d'image. J'ai essayée les deux mais c’était vraiment du bricolage et rien ne se passait... Alors si quelqu'un pouvait m'aider ce serait génial =)
En sachant que mes onglets sont en s_hover ( ils s'ouvrent au passage du curseur )

Voila mon CSS attribué aux onglets :

Code:

/*  onglets */
.systab .tab {
padding: 2px;
  margin-right: 5px;
  color: #000;
  background: transparent;
  border: 0px solid #000;
  cursor: pointer;
 }

 /* les onglets survolés */
 .systab .tab:hover {
  background: transparent;
  color: red;
 border-color: transparent;
 }

 /* onglets sélectionnés */
.systab .tab.selected{
  color: red;
    background: transparent;
  }

  /* contenus associés aux onglets  */
  .systab .contents {
        margin-top: 10px;
        margin-bottom: 1px;
        color: #000;
        background: #fff;
        border: 1px solid #000;
        padding: 10px;
 }


et mon html placé dans le message de page d'accueil :

Code:

<div class="systab s_slide s_hover selected">
 <div>
  <span><img src="http://i17.servimg.com/u/f17/17/41/81/03/pour_c11.gif"></span>Mon contenu 1
 </div>
  <div>
  <span><img src="http://i17.servimg.com/u/f17/17/41/81/03/stat13.gif"></span>Mon contenu 2
  </div>
  <div>
 <span><img src="http://i17.servimg.com/u/f17/17/41/81/03/stat13.gif"></span>Mon contenu 3
  </div>
 </div>


Voila ce que ça donne pour l'instant :

Et voila ce que j'aimerais :

Et sinon : un forum ou j'ai vu a peu près ce que je veux

Merci a tout ceux qui auront la gentillesse de consacrer un peu de leur temps a mon problème,
Luna

[Matriochka]

Bonjour,

Il te suffit d’utiliser les propriétés CSS d’opacité. Exemple :

Onglets non éclairés :

Code:

.systab .tab {
opacity:0.7;
-moz-opacity:0.7;
-ms-filter:"alpha(opacity=70)";
filter:alpha(opacity=70);
padding: 2px;
  margin-right: 5px;
  color: #000;
  background: transparent;
  border: 0px solid #000;
  cursor: pointer;
 }

Onglets éclairés :

Code:

.systab .tab:hover {
opacity:1;
-moz-opacity:1;
-ms-filter:"alpha(opacity=100)";
filter:alpha(opacity=100);
  background: transparent;
  color: red;
 border-color: transparent;
 }

[Lunaa]

Merci pour ta réponse si rapide ! =)

Ton code est très bien, mais y aurait-il une possibilité pour que l'image de l'onglet sélectionné reste éclairée même si le curseur n'est pas dessus ?

[Lunaa]

Ah c'est bon, j'ai réussi en mettant le code que tu m'a donné pour les onglets survolés dans les onglets sélectionnés. Je met en résolu.

Merci encore !