AccueilCodesTutorielsForumsEmploiLivresConnexion

  • Javascript / Ajax / DHTML CodeS-SourceS
  • RSS CodeS-SourceS
  • CodyxBot, le Bot GTalk & MSN qu'il vous faut !
  • Générez des revenus avec vos codes, scripts et tutoriaux
  • Aide à la navigation du site
begin process at 2009 01 10 02:16:53
Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

TROIS FLÈCHES POUR TROIS LIENS DE COULEURS - LINK, VISITED, HOVER


Information sur la source

Catégorie :Effets Niveau : Débutant Date de création : 24/10/2003 Vu / téléchargé: 9 715 / 222
Auteur : Nocturne Site perso
Ecrire un message privé
Ce membre participe au partage de revenus publicitaires
Note :
9,25 / 10 - par 4 personnes
9,25 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Commentaire sur cette source (4)
Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale
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

  • <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>
<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

 

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

Commentaires et avis

signaler à un administrateur
Commentaire de Nocturne le 24/10/2003 19:18:20

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+

signaler à un administrateur
Commentaire de jjdagadir le 25/10/2003 17:37:46

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 à un administrateur
Commentaire de Nocturne le 30/10/2003 00:12:40

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

signaler à un administrateur
Commentaire de trialrofr le 11/11/2003 16:50:02

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

Ajouter un commentaire

Nos sponsors

Sondage...

CalendriCode

Janvier 2009
LMMJVSD
   1234
567891011
12131415161718
19202122232425
262728293031 

Consulter la suite du CalendriCode


Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,234 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.