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

Soyez le premier à donner votre avis sur cette source.

Vue 15 415 fois - Téléchargée 429 fois

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

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
7
Date d'inscription
dimanche 7 septembre 2003
Statut
Membre
Dernière intervention
6 juillet 2009

Très interessante comme source et très bonne idée.
Rien à dire le code est clair.
Messages postés
115
Date d'inscription
mardi 26 février 2002
Statut
Membre
Dernière intervention
15 novembre 2007

Merci jjdagadir pour ton commentaire.
Bonne prog à toi.
Nocturne.
Messages postés
127
Date d'inscription
lundi 7 avril 2003
Statut
Membre
Dernière intervention
6 mars 2009

c'est vrai que çà a le mérite d'être clair, reste à étudier l'influence des déclages éventuels. Mais en tous cas bravo pour la présentation soignée et approfondie du descriptif, c'est comme çà qu'on les aime plutôt que des codes jetés sans aucune explication. Donc bravo et merci.
Kenavo
Messages postés
115
Date d'inscription
mardi 26 février 2002
Statut
Membre
Dernière intervention
15 novembre 2007

L'interet de cette source c'est le coté 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.
a+

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.