Bonjour,
J'ai un petit problème avec une image en rollover:
Un bouton devrait rester "allumé" une fois cliqué, mais ce n'est pas le cas.
 
html: (les tags sont propres à CMS Made Simple (CMSMS) mais ça ne change rien)
<div id="menuPrincipal"><ul>
   <li>{cms_selflink page="home"}</li>
   <li>{cms_selflink page="page-test"}</li>
   <li>{cms_selflink page="plan-du-site"}</li></ul></div>
 
css:  
#menuPrincipal a:hover { background-image: url(images/menuPrincipalOver2.gif); background-repeat:no-repeat; background-position:top center; color:#fff;}
#menuPrincipal a:active { background-image: url(images/menuPrincipalOver.gif); background-repeat:no-repeat; background-position:top center; color:#fff;}

c'est justement a cause du Hover, qui active l'evenement uniquement quand la souris est sur ton objet, il ne reste pas par la suite.
dans ton cas c'est plus onmouseover je pense, tu declenche l'evenement, et meme si tu enleve la souris, l'evenement continue et reste.

ah, j'ai oublié de préciser qu'entre les deux je cliquais... mais merci quand même pour ta réponse.
J'édite mon post.

sauf erreur, la pseudo-classes :active n'est affichée que lors du click, ca ne représente pas l'élément en cours (il ne pas lire "l'élément activé" )
 
Tu devrais essayer plutot d'obtenir l'effet que tu veux soit pas du JS soit directement à la construction de la page

C'est là qu'est le coeur du problème! Ma perception de "active" était erronnée..
 
Mon site est motorisé en php par "cms made simple". Directement ce n'est donc pas possible car j'ai un template unique pour toutes les pages.
Je vais essayer de voir ce qu'il est possible de faire en java.

javaSCRIPT
ce n'est pas la même chose

oui, lol, JoSéphine non plus..
J'ai vu qu'on pouvait associer une class à la balise body pour le faire sans js, mais je ne comprends pas..
(vu sur ce forum: EDIT: J'ai enlevé le lien car la solution est bidon)

j'ai trouvé...
J'invente une classe pageActive, qui au contraire de active n'est pas temporaire.
Pour celà, j'utilise la variable serveur $_SERVER['REQUEST_URI'] qui me donne une indication sur la page courante.
Je compare cette variable avec le chemin attendu (le chemin visible dans ma barre d'adresse une fois que j'ai cliqué sur le lien), et selon si ça correspond ou pas je fais en sorte que mon lien soit de la classe pageActive (ou pas).
(L'avantage c'est que le lien gardera sa classe pageActive une fois arrivé sur la nouvelle page, contrairement à la classe "active" qui "s'évanouit" dès qu'on a changé de page).
 
concrètement:
J'ai une page "page-test" dont l'url complète est www.monsite.com/cmsms/index.php?page=page-test
La variable $_SERVER['REQUEST_URI'] me renvoie:                       /cmsms/index.php?page=page-test
(pour info, on peut savoir précisément ce que renvoie la variable $_SERVER['REQUEST_URI'] en l'affichant de la sorte:
<?php echo "$_SERVER['REQUEST_URI']"; ?>
)
 
Sachant celà, je teste si je suis sur la page "page-test", et selon quoi je fais en sorte de définir si la page est active ou non:
Par exemple, au lieu de mettre:  
<div id="menuPrincipal">
<ul>  
<li><a href="http://www.monsite.com/cmsms/index.php?page=page-test">Page test</a>';</li>  
<li><a href="http://www.monsite.com/cmsms/index.php?page=plan-du-site">Plan du site</a></li>
</ul>
</div>
 
,je mets:
<div id="menuPrincipal">
<ul>
<li><?php
if ( $_SERVER['REQUEST_URI']=="/cmsms/index.php?page=page-test" )
 { echo '<a class="pageActive" href="http://www.monsite.com/cmsms/index.php?page=page-test">Page test</a>'; }
 else
{ echo '<a href="http://www.monsite.com/cmsms/index.php?page=page-test">Page test</a>'; }
</li>
{*Idem pour les autres liens: *}
<li><?php
if ( $_SERVER['REQUEST_URI']=="/cmsms/index.php?page=plan-du-site" )
 { echo '<a class="pageActive" href="http://www.monsite.com/cmsms/index.php?page=plan-du-site">Plan du site</a>'; }
 else
{ echo '<a href="http://www.monsite.com/cmsms/index.php?page=plan-du-site">Plan du site</a>'; }
</li>
</ul>  
</div>
 
dans mon fichier css, j'avais:
#menuPrincipal a:active { background-image: url(images/menuPrincipalOver.gif); background-repeat:no-repeat; background-position:top center; color:#fff;}
et j'ai rajouté:
#menuPrincipal a.pageActive { background-image: url(images/menuPrincipalOver.gif); background-repeat:no-repeat; background-position:top center; color:#fff;}