background css avec une condition javascript

Version imprimable

06/04/2013, 18h16
Tigrou 74

background css avec une condition javascript

Bonjour,

Je viens juste de m'inscrire et j'ai d�j�besoin d'aide. J'esp�re r�ussir � �tre claire.

Dans le site que je suis entrain de faire les onglets de mon menu ne sont pas des mots mais des background dans CSS: ainsi, au survol le mot est en surbrillance.

En fait, je voudrais que l'onglet correspondant � chaque page reste en surbrillance quand on est sur cette page. Du coup, il faudrait faire �a en javascript mais je ne sais pas quelle est la bonne syntaxe. En gros je veux dire:

if url(.....html) alors met tel background � tel id

Si quelqu'un a une id�e, il me sauvera la vie!

Merci.
06/04/2013, 18h44
Auteur
Bonjour,

tu as cette solution
Code:

1 2 if (document.location=="ton_url") document.getElementById("idElement").style.backgroundColor="#123456";
mais cela t'oblige � �crire dans le code l'url de la page qui peut �tre plus ou moins longue.

Je pense que pour chaque page il faudrait plut�t quelque chose dans ce genre :

Code:

<body onload="document.getElementById('idElement').style.backgroundColor='#123456'">

et pour chaque page que tu vas cr�er tu modifies la valeur de idElement.
06/04/2013, 18h46
SylvainPV

Est-ce que le code HTML de ton menu se trouve dans toutes les pages de ton site ? Si c'est le cas, il te suffit de mettre dans le HTML une classe CSS selected sur l'onglet correspondant � ta page, pas besoin de Javascript.
06/04/2013, 19h22
Tigrou 74

Merci � vous deux, vos r�ponses m'ont bien servi.

Sylvain: malheureusement je ne pense pas pouvoir faire ce que tu me dis car le background est diff�rent pour chaque ID et du coup mes menus seront tous en surbrillance dans toutes les pages. Mais �a fait juste 2 mois que je fais du web, donc je ne suis s�re de rien.

Bonne continuation � tous.

Pour illustrer ce qu'a �crit Sylvain :

Code:

1
2
3
4
5
6
.menuSelected{
	color:#123456;
}
.menuNotSelected{
	color:#0000FF;
}

puis par exemple dans la page 1 :

Code:

1
2
3
4
5
6
<div>
<span class="menuSelected"> Menu1</span>
<span class="menuNotSelected"> Menu2</span>
<span class="menuNotSelected"> Menu3</span>
<span class="menuNotSelected"> Menu4</span>
</div>

puis par exemple dans la page 2 :

Code:

1
2
3
4
5
6
<div>
<span class="menuNotSelected"> Menu1</span>
<span class="menuSelected"> Menu2</span>
<span class="menuNotSelected"> Menu3</span>
<span class="menuNotSelected"> Menu4</span>
</div>

etc.

Je vois tout � fait le principe en utilisant une classe, mais comme mon menu 1 a un background, le menu 2 un autre background, etc, je ne peux pas faire comme �a.

J'ai essay� la premi�re solution car c'est celle qui me parle le plus, mais j'ai du louper un truc parce que �a ne marche pas. Je teste sur Wamp avec ce code dans le <head>:
Code:

1 2 3 4 5 6 7 8 <script type="text/javascript"> if (document.location=="http://localhost/blindcat/infos.html") document.getElementById("inf").style.backgroundImage="infos_b.jpg"; else document.getElementById("inf").style.backgroundImage="infos.jpg"; </script>
Je ne sais pas du tout o� est l'erreur.

Sinon j'ai essay� la 2�m solution et �a ne marche pas non plus. Je vais continuer � tester tout ce que je peux.

En tout cas merci � vous deux.

Citation:

Envoy� par Tigrou 74

Je vois tout � fait le principe en utilisant une classe, mais comme mon menu 1 a un background, le menu 2 un autre background, etc, je ne peux pas faire comme �a.

tu sais que tu peux cumuler les classes ?
Code:

1 2 3 4 5 6 7 8 9 10 11 12 .menuSelected{ color:#123456; } .menuNotSelected{ color:#0000FF; } .background1{ background-image: url("image1.png"); } .background2{ background-image: url("image2.png"); }
Code:

1 2 3 4 5 6 <div> <span class="menuSelected background1"> Menu1</span> <span class="menuNotSelected background2"> Menu2</span> <span class="menuNotSelected background1"> Menu3</span> <span class="menuNotSelected background1"> Menu4</span> </div>
Citation:
Envoy� par Tigrou 74
J'ai essay� la premi�re solution car c'est celle qui me parle le plus, mais j'ai du louper un truc parce que �a ne marche pas. Je teste sur Wamp avec ce code dans le <head>:
Code:

1 2 3 4 5 6 7 <script type="text/javascript"> if (document.location=="http://localhost/blindcat/infos.html") document.getElementById("inf").style.backgroundImage="infos_b.jpg" else document.getElementById("inf").style.backgroundImage="infos.jpg"; </script>
en postant le code je me suis pos� la question de savoir s'il fallait utiliser un lien local ou non... Essaye voir avec

Code:

"http://nomDuDomaine/blindcat/infos.html"

07/04/2013, 15h54
NoSmoking
Bonjour,
contentes toi de v�rifier que le nom de la page est dans ton texte avec la m�thode indexOf
Code:

1 2 3 if( textSource.indexOf(window.location.href) >-1){ // action à faire }
ou un truc approchant.

Citation:

Envoy� par Tigrou 74

Sylvain: malheureusement je ne pense pas pouvoir faire ce que tu me dis car le background est diff�rent pour chaque ID et du coup mes menus seront tous en surbrillance dans toutes les pages. Mais �a fait juste 2 mois que je fais du web, donc je ne suis s�re de rien.

Aucun probl�me, il suffit de faire une r�gle CSS pour chaque �l�ment du menu.
Code:

1 2 3 4 5 6 7 8 <nav> <ul> <li id="lien-accueil">Accueil</li> <li id="lien-infos" class="selected">Infos</li> <li id="lien-faq">F.A.Q.</li> </ul> </nav>
Code:

1 2 3 4 5 6 7 #lien-accueil { background-image: url('img/onglet_accueil.png'); } #lien-accueil.selected { background-image: url('img/onglet_accueil_selected.png'); } #lien-infos { background-image: url('img/onglet_infos.png'); } #lien-infos.selected { background-image: url('img/onglet_infos_selected.png'); } #lien-faq { background-image: url('img/onglet_faq.png'); } #lien-faq.selected { background-image: url('img/onglet_faq_selected.png'); }
Vraiment, il n'y a pas besoin de Javascript pour �a. Alors autant s'en passer.

07/04/2013, 17h56
NoSmoking

Citation:

Vraiment, il n'y a pas besoin de Javascript pour �a. Alors autant s'en passer.

:oops: je n'ai pas pris la peine de lire la discussion depuis le d�but, je suis parfaitement d'accord avec le fait de ce passer de javascript dans ce cas
07/04/2013, 17h59
Tigrou 74

C'est bon!!!!

�a y est j'ai r�ussi!

Le CSS suffisait bel et bien. Je n'avait pas du tout pens� � faire plusieurs classes. �a m'arrange grave car je ne suis que webdesigner d�butante, donc le javacript me semble super complexe. Donc merci "auteur" et merci � tous les autres. �a fait super plaisir de voir des gens qui veulent nous aider.

c'�tait tellement simple finalement que jme sens un peu b�te. Mais c'est pas fini, je suis s�re qu'il y en aura d'autres malheureusement!

MERCI MERCI MERCI