Couleur du lien en cours

**Sandara** · 19/11/2006, 20h09

Je chercher à modifier la couleur du lien de ma page en cours.
Exemple :

J'ai une page archives, avec 3 liens en bleu dedans, 2005, 2006, 2007.

Si je clique sur 2005 je veux que le lien 2005 devienne rouge, puis si je clique sur 2006 je veux que le lien 2005 redevienne bleu et que le lien 2006 passe rouge, etc ...

Merci d'avance.

**trotters213** · 20/11/2006, 08h59

C'est en Javascript que ça se fait :

Code Javascript :

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
<!--
window.onload=colore_lien_courant;
 
//fonction qui permet de ne pas pouvoir cliquer sur un lien pointant sur la page actuelle
function colore_lien_courant()
{
	//on récupère tous les liens de la page
	var AllLinks=document.getElementsByTagName('a');
	//récupère la sous-chaine entre le début de l'URL et le dernier "/" ou "php" (=adresse sans paramètre GET)  
	//exemple : http://www.mpl.ird.fr/IS/contacts/?lang=fr# retournera http://www.mpl.ird.fr/IS/contacts/
	var cut=Math.max(document.location.href.lastIndexOf('/'),document.location.href.lastIndexOf('php'))+1;
	for(i=0;i<AllLinks.length;i++)//pour chaque lien
	{
		AllLinks[i].onfocus=function(){this.blur()} //supprime les pointillés autour d'un lien déjà cliqué
		//comparaison entre lien pointé et page actuelle
		if (AllLinks[i].href == document.location.href.substring (0,cut))
		{
			AllLinks[i].style.color='#f00';//on change la couleur
		}
	} 
}
//-->

C'est ça que tu hcerches

**Sandara** · 20/11/2006, 17h58

Je m'excuse mais je ne m'y connais pas trop en javascript.

Pourrais tu me dire ou il faut mettre cette ligne ? :
window.onload=colore_lien_courant;

Merci d'avance

**trotters213** · 21/11/2006, 08h41

Tu te crées un fichier .js (par exemple colore.js), tu colles tout le code que je t'ai donné dans ce fichier et dans le head de ton HTML tu fais :

Code HTML :

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

<script language="JavaScript" src="le_chemin_vers_ton_fichier/colore.js" type="text/javascript"></script>

**Sandara** · 21/11/2006, 17h03

Ca ne marche pas, je n'ai aucune erreur mais rien ne se passe :/

**trotters213** · 21/11/2006, 17h19

Dans ton le code javascript, remplace :

Code javascript :

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

var AllLinks=document.getElementsByTagName('a');

par

Code javascript :

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

var AllLinks=document.getElementsByTagName('A');

Si cela ne marche toujours pas, montre le code HTML que tu utilises pour voir?

**Sandara** · 21/11/2006, 17h57

Ca ne marche toujours pas.

En fait j'ai une page menu qui englobe ma bannière et mon menu a gauche.
Et j'apelle cette page menu dans toutes mes autres pages.

Dans ma page menu j'ai ce code :

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
<? 
  require("declaration.php");
  require("gestionmenu.php");
  require("connexion.php");
  session_start();
?>
 
<html>
  <head>
   <LINK rel="stylesheet" type="text/css" href="style.css">
     <title>Site de ...</title>
	<script language="JavaScript" src="lien.js" type="text/javascript"></script>
  </head>
 
<body bgcolor='#DDDDDD' link='white' alink='white' vlink='white'> ...

Dans ma page lien.js j'ai le code que tu m'a donné.

Et dans ma page activité par exemple j'ai des liens de ce style :

Code :

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

1
2
3
4
5
6
7
8
9
 
	<table border="0" width='100%'>
	  <tr>
	  <td width="33%" height="25%" align="center">
			<a class="lienact" href='restaurants.php'>Restaurants</a>
	  </td>
	  <td width="34%" height="25%" align="center">
			<a class="lienact" href='hebergement.php'>Hebergement</a>
	  </td>	...

J'ai essayé d'enlever mes class css dans mes <a>, j'ai egalement essayer de mettre la phrase de script dans ma page activité, mais rien n'a marché :/

**trotters213** · 22/11/2006, 09h01

Essaie plutôt comme ça :

Code Javascript :

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
<!--
window.onload=colore_lien_courant;
 
//fonction qui permet de ne pas pouvoir cliquer sur un lien pointant sur la page actuelle
function colore_lien_courant()
{
	//on récupère tous les liens de la page
	var AllLinks=document.getElementsByTagName('a');
 
	for(i=0;i<AllLinks.length;i++)//pour chaque lien
	{
		if (AllLinks[i].href == document.location.href)
		{
			AllLinks[i].style.color='#f00';//on change la couleur
		}
	} 
}
//-->

PS : au sujet de ton code :
- fais ton session_start() avant tes includes (afin d'être sur qu'il soit toujours pris en compte)
- dans le code HTML, mets toutes tes balises en minuscules et fermes les toutes (mêmes link)
- défini un doctype (XHTML transitional est le "mieux" )
- sépare le contenu et la mise en page (utilise des CSS plutôt que de mettre des attributs à tes balises)
- mets tes attributs entre guillemets (pas entre apostrophes)

**Sandara** · 24/11/2006, 16h46

Merci pour tes conseils que j'ai commencé a suivre !

Mais pour mes liens ca ne marche toujours pas, ils ne changent pas de couleurs quand je suis sur la page correspondante. :/

**trotters213** · 26/11/2006, 11h20

tu es sur que tu inclus bien le fichier Javascript, que ton lien est bon ?

**Sandara** · 27/11/2006, 02h28

Voila que ca marche, il fallait surement redemarer easy php ...

Merci beaucoup a toi

Couleur du lien en cours

JavaScript

Discussions similaires

Partager

Partager