Discussion :

[LunaSev]

Bonjour,

Je suis débutante en javascript.
Je souhaite que, lorsque je suis sur une page, le bouton du menu correspondant change de couleur.
Je ne suis pas sûre d'être très claire...

J'ai trouvé quelques tutos (le premier ne le fait pas en js):
http://www.maratz.com/blog/archives/...x-active-link/
http://www.fastclemmy.com/index.php?..._vous-etes-ici

J'ai bien compris (je crois!) la fonction javascript, seulement, je ne sais pas comment l'appeler dans ma liste.

ma liste actuelle :

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
21
22
<script type="text/javascript">
	function colorOver(id) {
		var elmt = document.getElementById(id);
		elmt.style.background='#e4fe9a'; 
	}
</script>
<script type="text/javascript">
	function colorOut(id) {
		var elmt = document.getElementById(id);
		elmt.style.background='#fffacf'; 
	}
</script>
<div id=menu_haut>
	<ul>
		<li onMouseOver="javascript:colorOver('li1');" onMouseOut="javascript:colorOut('li1');" id="li1" ><a href="<?php echo tep_href_link(FILENAME_DEFAULT); ?>">Accueil</a></li>
		<li onMouseOver="javascript:colorOver('li2');" onMouseOut="javascript:colorOut('li2');" id="li2" ><a href="<?php echo tep_href_link(FILENAME_BONDECOMMANDE); ?>">Professionnel</a></li>
		<li onMouseOver="javascript:colorOver('li3');" onMouseOut="javascript:colorOut('li3');" id="li3" ><a href="<?php echo tep_href_link(FILENAME_INFO); ?>">Informations</a></li>
		<li onMouseOver="javascript:colorOver('li4');" onMouseOut="javascript:colorOut('li4');" id="li4" ><a href="<?php echo tep_href_link(FILENAME_RECETTE); ?>">Recettes</a></li>
		<li onMouseOver="javascript:colorOver('li5');" onMouseOut="javascript:colorOut('li5');" id="li5" ><a href="<?php echo tep_href_link(FILENAME_CONCOURS); ?>">Concours</a></li>
		<li onMouseOver="javascript:colorOver('li6');" onMouseOut="javascript:colorOut('li6');" id="li6" ><a href="<?php echo tep_href_link(FILENAME_CONTACT_US); ?>">Contact</a></li>
	</ul>
</div>

Pouvez-vous m'aider/expliquer, ou me donner une autre solution?

[SpaceFrog]

déja mets toutes les fonctions dans une seul et même balise script ...

ensuite:
evite aussi de passer id en parm ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function colorOut(ObjId) {
		var elmt = document.getElementById(ObjId);
		elmt.style.backgroundCOlor='#fffacf';

ensuite les évènements sur les objets ne s'attendent pas a recevoir une recette de crèpes suzette mais bien du js donc:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<li onmouseover="colorOver('li5');" onmouseout="colorOut('li5');" id="li5" ><a href="<?php echo tep_href_link(FILENAME_CONCOURS); ?>">Concours</a></li>

et les evenements en minuscule

[LunaSev]

Ouch... je ne pensais pas qu'en si peu de code il y aurait autant à revoir!

Comment je fais si je dois éviter de passer l'id en paramètre?

Merci SpaceFrog, je change de suite.

[SpaceFrog]

non je disais juste évite d'employer des noms de variables qui peuvent porter à confusion, js utilisant déja le nom id ...

[LunaSev]

ah ok!
merci!

[le_chomeur]

moi j'aurais passé directement l'objet :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function colorOut(Obj) {
		Obj.style.backgroundCOlor='#fffacf'; 
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<li onmouseover="colorOver(this);" onmouseout="colorOut(this);" id="li5" ><a href="<?php echo tep_href_link(FILENAME_CONCOURS); ?>">Concours</a></li>

et hop hop hop plus besoins d'id ;-)

[LunaSev]

Merci le chomeur, je ne savais pas qu'on pouvait faire ça.

romainVALERI, je n'avais pas vu ton message.
Je vais surement poser une question très (très) bête, mais :
comment je fais pour identifier le menu à colorer?
J'ai bien compris pour isoler la chaine de caractère dans l'adresse de la page, mais comment dire qu'elle correspond à un bouton du menu bien précis?

[RomainVALERI]

Ne sachant pas exactement (heu... même pas du tout en fait ) ce que ton PHP est censé générer comme href pour tes liens, difficile de dire de manière précise, mais le principe est le suivant : il faut une certaine corrélation (décidée par toi) entre les id de tes éléments li et les href des liens qu'ils contiennent :

>>> soit tu écris les id en php comme tu fais pour les href, en conservant une correspondance entre les deux,

>>> soit tu modifie le morceau de php qui écrit les href en y incluant le numéro du menu correspondant

D'une manière ou d'une autre, ta fonction sera facile à écrire une fois que les id et href auront un point de correspondance, sinon il faudrait passer par un switch...case assez lourd à écrire, maintenir, et exécuter...

Je détaillerai au besoin si ce n'est pas clair mais voilà le principe général que je te propose... ^^

[RomainVALERI]

La fonctionnalité que tu souhaites peut être implémentée de la manière suivante :

>>> tu crées une fonction (par exemple) coloreMenuActif, que tu appelles à chaque chargement de page (onload du body, typiquement)

>>> cette fonction doit récupérer la valeur de window.location qui contient l'adresse de la page en cours (affichée notamment dans la barre d'adresse du navigateur), puis chercher dans la chaine de caractères obtenue la partie qui te permet (en fonction du nommage que tu as choisi) d'identifier quel menu colorer.

>>> il ne reste alors qu'a affecter le style.background que tu veux... ^^
(attention cependant à l'interaction entre ce mécanisme et celui du survol : sinon après un survol de ton menu, l'élément "courant", coloré par la fonction dont je te parle, reprendra la même couleur "normale" que les autres... mais quand tu en seras là, si tu galères, reviens nous voir on aura plein de solutions ... ^^)

Yapuka !