background css avec une condition javascript

**Tigrou 74** · 06/04/2013, 18h16

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.

**Auteur** · 06/04/2013, 18h44

Bonjour,

tu as cette solution

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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 html :

S�lectionner tout - Visualiser dans une fen�tre � part

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

et pour chaque page que tu vas cr�er tu modifies la valeur de idElement.

**SylvainPV** · 06/04/2013, 18h46

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.

**Tigrou 74** · 06/04/2013, 19h22

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.

**Auteur** · 06/04/2013, 20h02

Pour illustrer ce qu'a �crit Sylvain :

Code CSS :

S�lectionner tout - Visualiser dans une fen�tre � part

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

puis par exemple dans la page 1 :

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

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 html :

S�lectionner tout - Visualiser dans une fen�tre � part

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.

**Tigrou 74** · 07/04/2013, 14h54

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 html :

S�lectionner tout - Visualiser dans une fen�tre � part

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.

**Auteur** · 07/04/2013, 15h20

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 CSS :

S�lectionner tout - Visualiser dans une fen�tre � part

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 html :

S�lectionner tout - Visualiser dans une fen�tre � part

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>

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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

**NoSmoking** · 07/04/2013, 15h54

Bonjour,
contentes toi de v�rifier que le nom de la page est dans ton texte avec la m�thode indexOf

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

ou un truc approchant.

**SylvainPV** · 07/04/2013, 17h36

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 html :

S�lectionner tout - Visualiser dans une fen�tre � part

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 css :

S�lectionner tout - Visualiser dans une fen�tre � part

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.

**NoSmoking** · 07/04/2013, 17h56

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

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

**Tigrou 74** · 07/04/2013, 17h59

�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

background css avec une condition javascript

JavaScript

Discussions similaires

Partager

Partager