changer la couleur des liens

**MANU_2** · 20/09/2005, 16h16

Code :

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

<A HREF="<?=$tab_menu[$i][1]?>" class="menug2" id="<?php echo $i; ?>" onfocus="document.GetElementById('1').style.color='#C90000;'">&nbsp;<?=$tab_menu[$i][0]?></a>

Je voudrais que lorsqu'on clique sur le lien ça change de couleur mais si on clique sur un autre, ce lien récupère sa couleur d'avant.
Je pense que je doit utilisé les évènement onfocus (ou onclick) et onblur.
Mais mon code JS doit être faux.

Pouvez m'aider.

Merci

**KiLVaiDeN** · 20/09/2005, 16h18

Fait plutot un this.style.Color='#HEBABE' sur l'évènement onClick, mais tu va surement avoir un conflit avec le css..

**MANU_2** · 20/09/2005, 16h31

ça marche pas, je dois surement avoir un conflit avec la feuille CSS.
Et comment régler ce problème de conflit ?

**SpaceFrog** · 20/09/2005, 16h37

vire le class ...

**MANU_2** · 20/09/2005, 16h47

J'ai viré le class et là c'est la catastrophe : ça ne marche pas (le onclick) et en plus je perd tout mon style.

**KiLVaiDeN** · 20/09/2005, 16h56

Pour m'amuser, j'ai codé ton truc, dans l'évènement onLoad j'ai mit le lien à activer par défaut ( si tu changes de page, ce qui risque d'arriver ).

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
16
17
18
19
20
 
<html>
<head>
<script language="JavaScript">
  var lastLinkId = "";
 
  function ChangeLinkColor(aLinkId) {
    if(lastLinkId != "") document.getElementById(lastLinkId).style.color="#FF0000";
    document.getElementById(aLinkId).style.color="#0000FF";
    lastLinkId = aLinkId;    
  }  
</script>
</head>
<body onLoad="ChangeLinkColor('lien3')">
<a id="lien1" href="#" style="color:#ff0000" onClick="ChangeLinkColor(this.id);">Un lien</a>
<a id="lien2" href="#" style="color:#ff0000" onClick="ChangeLinkColor(this.id);">Un lien</a>
<a id="lien3" href="#" style="color:#ff0000" onClick="ChangeLinkColor(this.id);">Un lien</a>
<a id="lien4" href="#" style="color:#ff0000" onClick="ChangeLinkColor(this.id);">Un lien</a>
</body>
</html>

**MANU_2** · 20/09/2005, 17h00

Merci, je testerais demain.

Sinon, j'ai un alert(this.style.Color); dans le onclick et on m'affiche "undefined".

**SpaceFrog** · 20/09/2005, 17h10

LOL Kilv
passer this.id en paramètre pour faire un document.getElementById

autant passer this tout court

**KiLVaiDeN** · 20/09/2005, 17h22

Et tu ferais comment si c'est un autre élément qui change la couleur du lien ?
Et pour le body onLoad ?

**KiLVaiDeN** · 20/09/2005, 17h26

En fait je voulais passer uniquement 'lien3' tout simplement dans le onLoad mais j'ai rajouté du code inutile ( document.getElementById('lien3').id == 'lien3' )

J'ai changé le code pour que ce soit plus évident

**MANU_2** · 21/09/2005, 08h46

J'ai un peu simplifié le code et ça marche, merci

Code :

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

1
2
3
4
5
6
<script language="JavaScript">
  function ChangeLinkColor(aLinkId) 
  {	
    document.getElementById(aLinkId-1).style.color="#C90000";
  } 
</script>

**KiLVaiDeN** · 21/09/2005, 11h18

Tu vas forcément avoir une erreur avec ton script, car le -1 ne marchera pas pour le premier id, de plus avec ta technique il faudrait que tes id soient des chiffres uniquement, donc attention !

**MANU_2** · 21/09/2005, 11h25

Oui mes idées sont que des chiffres et ça pose quel problème ?

Sinon aLinkId a une valeur minimum de 1 donc pas de -1.

**SpaceFrog** · 21/09/2005, 11h32

je sais plus ou j'ai lu qu'il fallait éviter des id numériques ...
et je ne sais plus non plus pourquoi ...

**KiLVaiDeN** · 21/09/2005, 11h34

Je suppose qu'un des problèmes lié aux id numériques est qu'un opérateur "+" peut être interpreté comme une addition, alors que ce n'est pas forcément le comportement voulu

**SpaceFrog** · 21/09/2005, 11h37

y'a toujours l'astuce de multiplier par 1 pour obtenir du numérique et de faire un .concat pour une chaine ...

**KiLVaiDeN** · 21/09/2005, 11h42

Oui c'est vrai, mais ça peut impliquer une modification plus ou moins couteuse de scripts déjà existants et une certaine lourdeur ( un concat est plus lourd qu'un '+' ), mais sinon je ne vois pas trop en quoi l'id pourrait poser un problème en étant numérique, hmm peut-être que certains id internes sont déjà en numérique ?

**MANU_2** · 21/09/2005, 11h45

Oui mais dans mon cas, pas de pb

**SpaceFrog** · 21/09/2005, 11h46

je sais pas kil, peut être aussi un problème de validité w3c ?

**KiLVaiDeN** · 21/09/2005, 11h51

Pour le savoir je pense qu'il faudrait comprendre le fonctionnement en interne de l'attribution des id aux différents éléments d'une page, d'ailleurs à ce propos ( je le dis bien que ce soit hors sujet par rapport au thème principal de ce post ) j'ai découvert que dans firefox, il y a une fonction qui permet de voir la structure arborescente de la page, Menu Tools, Dom Inspector, raccourci clavier "CTRL+SHIFT+I" !

Assez interessant comme découverte

changer la couleur des liens

JavaScript

Discussions similaires

Partager

Partager