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