Trois flèches pour trois liens de couleurs - link, visited, hover

Télécharger le projet
Commenter

Description

Le principe de cette source est d'aligner la flèche de couleur avec la couleur de son lien.

Trois flèches de couleurs (bleu, rouge, gris) correspondent aux trois liens (non-visité, survolé/cliqué, visité).

Au chargement de la page, il y a une mise à jour de la couleur des flèches suivant l'état (non-visité ou visité) du lien.
Cette mise à jour est déclenché par "onload" de la balise Body et par le click de la souris sur un lien.
Cette fonction "maj_fleche()" va effectuer la mise à jour.
Noter que cette fonction est déclenché aussi par onclick de la balise A pour permettre de passer la flèche à gris du lien précedament visité.

Après on trouve une gestion des flèches au cas par cas qui est déclenché par "onmouseover", "onclick", "onmouseout" des balises A.
Cette gestion est assurée par 3 fonctions "souris_click()", "souris_over()", "sourisOut()" qui s'appuient sur 3 class Css de couleur (.Bleu, .Rouge, .Gris) pour un effet mémoire de l'état du lien (cliqué, non-cliqué) via 2 variables "Couleur" et "ImageObjet.

On trouve 3 couleurs dans la balise Body (link, alink, vlink), ce qui permet un affichage des couleurs au cas où le visiteur ne pourrait lire le Css. Ces trois couleurs ne sont pas indispensable.

Pour personnalisé la couleur de mes liens (visité, non-visité), j'utilise 4 pseudo-formats (link, visited, hover, active).
Par défaut, la configuration de IE pour les liens visités ou non visités sont le bleu et le violet, (Outils/Options Internet/Couleurs).
Mémorisation des positions des flèches même après un rechargement de la page ou un retour page précédente ou après une fermeture et une re-ouverture de IE.
C'est par l'intermédiaire de IE qui mémorise (pour un certain temps) les URL des pages Web visité sur le Net.
Noté l'importance de link et visited qui se superpose sur les couleurs du navigateur IE.
Après je récupère l'information via les 2 pseudo-formats (link et visited).

Pour plus d'infos sur les pseudo-formats :
http://www.aidenet.com/css/css19.htm
http://selfhtml.selfhtml.com.fr/css/proprietes/pseudoformats.htm

link : pour les liens aux pages qui n'ont pas encore été visitées
visited : les liens, les pages visitées
hover : au passage de la souris sur le lien
active : le lien qui devient actif ou qui reçoit le focus

Source / Exemple : 


<html>
<head>
<TITLE>Trois flèches pour 3 liens - link, visited, hover</TITLE>
<META content="Trois liens, link, visited, hover .../... pour 3 flèches de couleur" name=description>
<META content="Nocturne - @2003" name=author>
<style type=text/css>
.Bleu, .Rouge, .Gris {text-size:11px;cursor:hand;}

.Bleu{color:blue;}
.Rouge{color:red;}
.Gris{color:#999999;}

A:link{COLOR:blue;}
A:visited{COLOR:#999999;}
A:hover{COLOR:red;background-color:#FFFF99;}
A:active{COLOR:red;}
</style>
<script type="text/javascript" language="JavaScript">
var Couleur="";
var ImageObjet="";

function souris_click(objet) {
objet.className='Gris';
document.all(objet.fleche).src='Gris.gif';
}

function souris_over(objet) {
Couleur = objet.className; //Mémorisation de la couleur pour souris out
objet.className = 'Rouge'; //Initialisation de la class à rouge
ImageObjet = eval("document." + objet.fleche + ".src"); //Mémorisation du chemin de la flèche pour souris out
eval("document.all." + objet.fleche + ".src='Rouge.gif'"); //Alignement flèche rouge
}

function souris_out(objet) {
if(objet.className !='Gris') {
	objet.className = Couleur;
  eval("document.all." + objet.fleche + ".src='" + ImageObjet + "'");
  }
}

function maj_fleche() { //**boucle de mise à jour des flèches de couleurs**
var line_number = "";
var nbr_liens=7; //Nombre de liens/flèches +1, maxi=100 donc 99 images flèches
for(i=1; i<nbr_liens; i++) { //Boucle de MAJ des flèches
  if (i<10) {line_number = "0" + String(i);}
  if (i>9) {line_number = String(i);}
  switch(document.getElementById("lien_"+ line_number).currentStyle.color) {  //Récupère la couleur du lien
	//Tri du lien en fonction de sa couleur, alignement de la flèche
		case ("#999999"): //Lien gris
			document.all("img_" + line_number).src='Gris.gif'; //Flèche gris
			break;
		case ("blue"): //Lien bleu
			document.all("img_" + line_number).src='Bleu.gif'; //Flèche bleu
			break;
		case ("red"): //Lien rouge
			document.all("img_" + line_number).src='Rouge.gif'; //Flèche rouge
			break;
	default: //Flèche bleu par défaut
		document.all("img_" + line_number).src='Bleu.gif';
	  break;
		}
  }
}
</script>
</head>
<body bgcolor=white onload="maj_fleche();" link="blue" vlink="#999999" alink="red">
<u>DEMO</u> :
<BR><BR>
<IMG id=img_01 src="Bleu.gif" name=img_01>
<A class="Bleu" id="lien_01" onmouseover="souris_over(this);"
 onclick="souris_click(this);maj_fleche();"
 onmouseout="souris_out(this);" href="http:\\www.google.com"
 target="_self" name="lien_01" fleche="img_01">Google</A>
<br>
<IMG id=img_02 src="Bleu.gif" name=img_02>
<A class="Bleu" id="lien_02" onmouseover="souris_over(this);"
 onclick="souris_click(this);maj_fleche();"
 onmouseout="souris_out(this);" href="http://www.javascriptfr.com"
 target="_self" name="lien_02" fleche="img_02">JavaScript CodesSources</A>
<br>
<IMG id=img_03 src="Bleu.gif" name=img_03>
<A class="Bleu" id="lien_03" onmouseover="souris_over(this);"
 onclick="souris_click(this);maj_fleche();"
 onmouseout="souris_out(this);" href="http:\\www.vbfrance.com"
 target="_self" name="lien_03" fleche="img_03">Visual Basic CodesSources</A>
<br>
<IMG id=img_04 src="Bleu.gif" name=img_04>
<A class="Bleu" id="lien_04" onmouseover="souris_over(this);"
 onclick="souris_click(this);maj_fleche();"
 onmouseout="souris_out(this);" href="http:\\www.pmu.fr"
 target="_self" name="lien_04" fleche="img_04">PMU</A>
<br>
<IMG id=img_05 src="Bleu.gif" name=img_05>
<A class="Bleu" id="lien_05" onmouseover="souris_over(this);"
 onclick="souris_click(this);maj_fleche();"
 onmouseout="souris_out(this);" href="http:\\www.sncf.fr"
 target="_self" name="lien_05" fleche="img_05">SNCF</A>
<br>
<IMG id=img_06 src="Bleu.gif" name=img_06>
<A class="Bleu" id="lien_06" onmouseover="souris_over(this);"
 onclick="souris_click(this);maj_fleche();"
 onmouseout="souris_out(this);" href="http:\\www.anpe.fr"
 target="_self" name="lien_06" fleche="img_06">ANPE</A>
<br>
</Body>
</html>

Conclusion :


Dernière info, j'ai constaté des problèmes de mémorisation pour les liens ouvrant dans une autre fenêtre comme avec "target=_blank", contrairement avec "_self" (ouverture dans la même fenêtre), qui fonctionne correctement.

Ce code fonctionne sous Internet Explorer 5.5 et IE6, j'ai pas regardé sous un autre navigateur...

Si vous améliorez le code, envoyé moi vos modifications.

Bonne prog à tous, Nocturne
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (cs_Nocturne)