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

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

Gif flèches
Fleche gif - Meilleures réponses
Fleches gif - Meilleures réponses
Relier avec des fleches - Forum - Flash
Gif machine a sous - Guide
Recherche medicale mots fleches - Guide
Fleche dessin ✓ - Forum - C# / .NET
Source d'experience mots fleches - Forum - Visual Basic 6

Ajouter un commentaire Commentaires

Signaler

trialrofr

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

11 nov. 2003 à 16:50

Très interessante comme source et très bonne idée.
Rien à dire le code est clair.

Signaler

cs_Nocturne

Messages postés: 115
Date d'inscription: mardi 26 février 2002
Statut: Membre
Dernière intervention: 15 novembre 2007

30 oct. 2003 à 00:12

Merci jjdagadir pour ton commentaire.
Bonne prog à toi.
Nocturne.

Signaler

cs_jjdagadir

Messages postés: 127
Date d'inscription: lundi 7 avril 2003
Statut: Membre
Dernière intervention: 6 mars 2009

25 oct. 2003 à 17:37

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

Signaler

cs_Nocturne

Messages postés: 115
Date d'inscription: mardi 26 février 2002
Statut: Membre
Dernière intervention: 15 novembre 2007

24 oct. 2003 à 19:18

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+

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.

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

Description

Source / Exemple :

Conclusion :

Codes Sources

A voir également

Vous n'êtes pas encore membre ?

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

Du même auteur (cs_Nocturne)

Texte défilant, deux effets, compatible firefox & ie

Ajouter une ligne dans un fichier - api

Info-bulle personnalisée, multilignes avec qq optons

Information disque dur

Retrouve la date de création d'un fichier - api

Source / Exemple :

Conclusion :

A voir également

Vous n'êtes pas encore membre ? inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Du même auteur (cs_Nocturne)

Texte défilant, deux effets, compatible firefox & ie

Ajouter une ligne dans un fichier - api

Info-bulle personnalisée, multilignes avec qq optons

Information disque dur

Retrouve la date de création d'un fichier - api

Vous n'êtes pas encore membre ?

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