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