Boutons menu qui change son image

Bonjour à tous
J'ai un problème pour le comportement des boutons du menu de mon site.

Je m'explique, je voudrais que lorsque je clique sur un rubrique le bouton change de couleur et par cela montre dans quelle rubrique on est.

Mes bouton sont des images que j'ai créé:
/images/communique.jpg (texte "Communiqués" dans une image en gris)
/images/communiqueb.jpg (texte "Communiqués" dans une image en bleu)

une en gris et une en bleu

Dans mon fichier menu.html, pour chaque bouton j'ai par exemple ceci:

<a href="spip.php?rubrique3" title="Communiqués"><img src="images/communique.jpg" width="193" height="33" border="0" alt="text" /></a>

En fait comment faire pour que "images/communique.jpg" passe à "images/communiqueb.jpg" lorque la page est active

J'espère que je me suis fait bien comprendre

Merci d'avance pour votre aide
Modifié par Florent V. (06 Aug 2008 - 11:56)

zohreh a écrit :
En fait comment faire pour que "images/communique.jpg" passe à "images/communiqueb.jpg" lorque la page est active

Eh bien quand ce bouton correspond à la page en cours, il faut générer un code HTML différent, tout simplement.

Le bouton est un lien vers une page différente:

<img src="images/communique.jpg" width="193" height="33" border="0" alt="Communiqués" />

Le bouton est un lien vers la page en cours (on peut aussi ne pas avoir de lien, mais juste le texte, peut-être dans un SPAN):

<img src="images/communiqueb.jpg" width="193" height="33" border="0" alt="Communiqués" />

Et voilà.

En passant, je ne vois pas trop pourquoi tu as placé le texte dans l'image, plutôt que d'utiliser un texte HTML et une image de fond en CSS. Je t'invite à lire le tutoriel suivant: Créer des menus simples en CSS.

Autre remarque: si tu gardes le texte dans l'image, il te faut un texte alternatif pertinent. Écrire alt="text" est une erreur. J'ai corrigé en alt="Communiqués". Si tu as différents boutons qui utilisent ce principe, il faudra adapter pour chaque bouton.

Merci pour ces conseils
Mais je ne comprend pas très bien, je suis débutante.

a écrit :
Le bouton est un lien vers la page en cours (on peut aussi ne pas avoir de lien, mais juste le texte, peut-être dans un SPAN):

Comment je fait pour faire que le bouton b soit activé dans la page en cours.

je dois préciser que je suis sous spip et certaines pages sont des fichier html, et d'autre directement lié à des rubriques spip

Hello,

Il n'est pas possible pour CSS de savoir sur quelle page tu te trouves, il ne peut donc pas mettre un style particulier à un lien particulier en fonction de ça.

La solution est comme l'indique Florent de modifier le code html de chaque page. C'est fastidieux et en pratique bien souvent irréalisable.
L'astuce serait d'utiliser javascript pour automatiser ce travail à chaque chargement de page (une comparaison entre document.location et le href de chaque lien de la page pour leur rajouter une classe "selected" par exemple).
As-tu quelques notions de Javascript ?

Cela dit, je rejoins Florent sur un autre point, il vaut mieux que tu te passes des images dans ton <a> et essaie de faire ça uniquement avec CSS (le code javascript dont je parle au dessus n'en sera que plus simple)

a écrit :
As-tu quelques notions de Javascript ?

Non pas du tout, mais je ne demande qu'à apprendre.

Tymlis a écrit :
L'astuce serait d'utiliser javascript pour automatiser ce travail à chaque chargement de page (une comparaison entre document.location et le href de chaque lien de la page pour leur rajouter une classe "selected" par exemple).

C'est une possibilité, mais on peut régler ça côté serveur. SPIP gère probablement ça en natif, mais il faut savoir coder des templates (appelés «squelettes») avec SPIP.
Il faudrait lire la documentation de SPIP à ce sujet puis poser la question sur un forum ou une mailing-list consacré(e) à SPIP.

Pour étayer ma proposition, voici la logique de ce que je propose en javascript :

1/ Récupérer la liste des liens de ton menu ( document.getElementById("menu).getElementsByTagName("a") par exemple)
2/ Passer en revue chacun de ces éléments (while() )
3/ Si le href de cet élément est contenu dans document.location, alors on applique les changements demandés (changer l'adresse de l'image intérieure, ou ajouter une classe CSS spéciale)

Je ne connais pas SPIP, et ne peut donc pas te proposer de solution de ce coté.

Je vais demander dans le forum de spip si il y a une solution de ce côté là,
et je vais essayer aussi avec la solution javascript.
Merci à tout les deux pour votre aide.
Je vous redonne des nouvelles

Bonsoir,
Il y a une solution avec Spip mais elle me paraît compliqué avec balise #EXPOSE

Finalement j'ai changé complètement le menu.

J'ai opté pour la solutions de Florent V. dans son 1er message:
Une image réactive en CSS avec une seule image et sans javascript sur Alsacecreations
http://css.alsacreations.com/Tutoriels-et-articles-divers/roll-over-css-image-unique
C'est super!
Seul truc qui me chicane c'est que je j'aurais voulu que le bouton qui change d'aspect lorsque l'on choisi une rubrique, reste actif (pour savoir dans quelle rubrique on est)
Peut-être que quelqu'un à une idée sur ce qu'on peux faire?
Modifié par zohreh (08 Aug 2008 - 21:41)

zohreh a écrit :
Seul truc qui me chicane c'est que je j'aurais voulu que le bouton qui change d'aspect lorsque l'on choisi une rubrique, reste actif (pour savoir dans quelle rubrique on est)
Peut-être que quelqu'un à une idée sur ce qu'on peux faire?

Heu... là je t'invite à relire le sujet en te concentrant un peu. Cette question que tu viens de poser, c'est la question que tu poses dans le tout premier message de ce sujet. En tout cas, c'est ainsi que moi-même et Tymils avons compris ton message. Et donc nos réponses donnent précisément des solutions (ou des pistes de solution) à ce problème!

Bonne relecture.

Bonjour,

Concernant spip pour connaitre la rubrique en cours il suffit d'utiliser la balise #EXPOSE qui renverra "on" si rubrique ou article de rubrique actif.

Exemple de syntaxe :

<li class="liste#EXPOSE"><a href="#URL_RUBRIQUE" class="lien#EXPOSE">#TITRE</a></li>

Donnera "listeon" et "lienon" si c'est la rubrique ou un article de la rubrique en cours.

Il ne te reste qu'a créer les class nécéssaires dans ta css

.listeon {}
.lienon {}

Pour en savoir plus voici une page ou est repris toutes les syntaxes spip (balises, filtres, boucles, critères) tu y trouvera #EXPOSE

Glossaire spip

et un article qui traite de cette balise.

Exposer un article dans une liste

PS:

Dans mon exemple j'utilise "liste" et "lien" pour des raisons spécifiques liées au projet l'on peux simplement utiliser class="#EXPOSE".
Modifié par knarf (09 Aug 2008 - 16:51)

Merci knarf pour cette aide précieuse.

J'aime bien les exemples concrets, c'est comme ça que j'apprends le mieux