begin process at 2012 02 14 10:05:26
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Effets

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

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


 Information sur la source

Note :
9,25 / 10 - par 4 personnes
9,25 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Effets Niveau :Débutant Date de création :24/10/2003 Vu / téléchargé :13 172 / 245
Auteur : Nocturne

Ecrire un message privé
Site perso
Ce membre participe au partage de revenus publicitaires
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/ps eudoformats.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

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources du même auteur

Source avec Zip Source avec une capture TEXTE DÉFILANT, DEUX EFFETS, COMPATIBLE FIREFOX & IE
Source avec Zip Source avec une capture WEB-STAT VISITES VER.01
Toutes les sources de Nocturne

 Sources de la même categorie

Source avec Zip Source avec une capture SHOWMAPAREA par phidelum
DHTML IE FILTRE DÉGRADÉ (OUTIL HTML POUR DÉVELOPPEUR) par internetdev
Source avec Zip ANIMATION DU TEXTE par brennal
Source avec Zip Source avec une capture EFFET RAYONS DU SOLEIL par tefa24600
TAILLE DE TEXTE EN FONCTION DE LA RÉSOLUTION par tefa24600
Toutes les sources de la catégorie Effets

Commentaires et avis

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+

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

Commentaire de Nocturne le 30/10/2003 00:12:40

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

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

Comparez les prix


Acer Liquid (noir) (XP.H480Q.013)
Entre 300€ et 346€

Visiter le guide achat

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

Photo Happy Bright Landscape WIth ButterfliesPhoto Beautiful woman in a bikini meditating on the beach
Photo bora-bora 

Visiter la photothèque
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), 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

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,435 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)