11550 sujets

JavaScript, DOM et API Web HTML5

Bouton reset couleur des liens

Pages :
Bonjour à tous,
bien que j'ai entièrement construit mon site sur Kompozer, je me rends compte que le Javascript me deviens indispensable.
Je désire en effet créer un bouton qui par simple clic remettrait les liens déjà visités en couleur de lien originaire (non visité-alink).
Malgré la lecture des tutoriaux, je peine à comprendre les formulations de variables et place du code à écrire...
Voici un script que j'ai risqué, avec trois liens et deux boutons,

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>essai 5</title>
<script language="JavaScript"></script></head>
<body style="color: rgb(0, 0, 0); background-color: white;" alink="#cc66cc" link="#6666cc" vlink="#339999">
<a href="../index.html">Accueil</a><br>
<a href="../plan.html">Plan du site</a><br>
<a href="../plan_detail.html">Plan détaillé</a><br>
<form><input value="Initialiser la couleur des liens" onclick="<vlink=" #cc66cc="
" type="button"></form>
<form><input value="Initialiser la couleur des liens" onclick="<a:focus {color: [i]couleur d'origine du lien[/i];}" type="button"></form>
</body></html>


Page visible à l'adresse : http://www.delcaflor.net/plan_fichiers/essai5.html

Merci de votre indulgence pour les pauvres en esprit,
et de vos compétences réunies,
Smiley rolleyes
Modifié par Antwa (27 Jun 2011 - 12:05)
Bonsoir,

Là, tu n'y es pas du tout! Tu confonds "javascript" et "css (style)".

Pour revenir à une couleur déterminée pour un lien visité, il n'est pas nécessaire de passer par du javascript, le css peut suffire :
a:visited {color:black;}
par exemple, si tu veux que le lien soit noir après un click.
Oui, merci pour la réponse.
Je me doute que je confonds "javascript" et "css"...
la différence est difficile à saisir quand on a pas d'exercices pratiques.
Mais, là, deux questions:
- comment dire que le bouton remet TOUS les liens de la page en noir ?
- où écrire ce "a:visited {color:black;}"
dans la "haed"
ou dans le bouton ... onclick="<a:visited {color:black;}" " type="button">

Mais je viens d'essayer la 2° solution, et les liens restent dans la couleur visités !
Il faut raccorder le css du bouton à la balise <body style ...>

Encore tant à apprendre !
Smiley confus
Hum je pense vraiment qu'il faut que tu suives un tuto javascript

Si ton but est de faire des essais javascript : fais les tutos

Si tu veux que les liens visités soient de la même couleur que tes liens normaux tu n'a pas besoin de javascript. Il suffit d'indiquer les mêmes propriétés aux deux dans ton fichier CSS

les propriétés CSS peuvent se mettre directement dans le fichier html mais il est mieux de les mettre à part.
Pour les exemples on les mets dans la section head du fichier html 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>essai 5</title>
<style>
body { color: rgb(0, 0, 0); 
          background-color: white; 
}
a:active { color:#cc66cc;}
a, a:visited { color:#6666cc;}
</style>
</head>
<body >
<a href="../index.html">Accueil</a><br>
<a href="../plan.html">Plan du site</a><br>
<a href="../plan_detail.html">Plan détaillé</a><br>

</body></html>
Tout dépend de ce que tu veux faire :
- soit forcer dynamiquement la couleur des liens : cela se fait en javascript,
- soit changer automatiquement la couleur des liens : cela se fait en css.

Le plus urgent pour toi, me semble-t-il, est d'approfondir le HTML et le CSS. C'est primordial! Et c'est déjà pas mal de boulot!
Le javascript, quant à lui, permet de rendre les pages "dynamiques" (à l'inverse de "statiques"). Un exemple parmi 100 : le javascript permet d'utiliser le "drag 'n drop" (glisser/déposer) et donc de déplacer des éléments sur l'écran.

Je crois qu'il ne faut pas essayer d'assimiler tout en même temps, mais qu'il faut plutôt progresser par étapes: html -> css -> javascript (+ jQuery) -> php -> sql etc.
Oui, merci pour vos réponses.
Je crois en effet qu'il faut que j'approfondisse les tutos, mais je ne trouve pas simple de passer de la lecture du dit tuto à l'exercice pratique ...
Je pense que ma question est quand même du javascript,
car je veux créer un bouton, donc un objet et lui affilier une fonction ou propriété, ce qui est bien la définition du javascript.
Et c'est bien une manipulation, qui se passe du côté client. Donc, ce que je veux faire c'est pas du <style>, c'est bien un objet qui entraîne une action.
Merci Arialia pour le petit script en couleur, qui montre bien où s'inscrit un style, mais je ne vois pas de trace du bouton !
PS: le script en couleur, est-ce du Dreamweaver ?
Antwa a écrit :
PS: le script en couleur, est-ce du Dreamweaver ?

Non, c'est de la colorisation syntaxique des codes mise en place par forum.alsacreations.com.

Antwa a écrit :
Je pense que ma question est quand même du javascript, car je veux créer un bouton, donc un objet et lui affilier une fonction ou propriété, ce qui est bien la définition du javascript.

C'est bien ça, il te faut du javascript! Tu crées le bouton en html et tu y places un onclick="..." qui va appeler la fonction javascript qui va changer la couleur des liens:
<input type="button" value="Changer la couleur" onclick="changer();" />


Il restera à créer en javascript cette fonction "changer()"! Smiley cligne
Voilà un langage que je comprend.
Cette fois le problème est bien posé !

question: pourquoi mon script déposé dans mon premier post ne s'est-il pas mis en couleur ?
Je l'ai pris, en couleur, dans la fenêtre html de Firefox, donc visualisé ...
il faut utiliser la coloration syntaxique approprié , n'utilise pas "code" il insère des retours chariots en trop ( en réalité l'editeur insère des <br> mais le style de code est du <pre> qui respecte les sauts de ligne ... du coup ils sont doublés, les autres types de coloration n'ont pas ce souci ) , prends "HTML" par défaut
Et voilà !
Merci de l'info pour la couleur du source, en HTML donc !
Smiley ravi

Par contre, pour écrire cette fonction "changer"() en javascript, je nage !
J'ai tenté ceci:
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>essai 1</title>
<script language="javascript">
function reset couleur des liens
document.link{<fontcolor='black'>}
document.vlinkcolor="#000000"
alink=vlink="#000000"</script>
</head>
<body style="color: rgb(0, 0, 0); background-color: white;"
alink="#cc66cc" link="#6666cc" vlink="#339999">
<br>
<a href="../index.html">Lien vers une autre page</a><br>
<br>
<br>
<form><input value="Initialiser la couleur des liens" onclick="()"
type="button"></form>
</body>
</html>


avec trois écritures de l'action demandé qui devraient être similaire,
mais il doit manquer quelque chose dans le onclick="()"
Smiley sweatdrop
Modifié par Antwa (27 Jun 2011 - 12:32)
Désolé, mais tu continues encore à mélanger les différents langages.
Il faudrait, pour faire gagner du temps à tout le monde, potasser un brin de théorie quand même. Et je reviens à ce que je disais dans mon post, "il faut y aller par étapes", sinon on finit par tout mélanger.
Dans mon exemple de bouton, j'ai mis .... onclick="changer();" .....
"changer()" est le nom de la fonction que j'appelle sur l'événement "onclick". Donc, pour faire simple, dans mon script js, j'aurai une fonction comme ceci :
function changer() {
  ici les instructions du script
}

Tu appelles ta fonction comme tu veux (en restant valide à ce niveau bien sûr); j'aurais pu la nommer 
function changer_la_couleur_s-il_te_plait () {...}
Pour faire comprendre à javascript ce que tu désires, tu dois lui parler dans sa langue, c'est-à-dire, respecter son vocabulaire et sa syntaxe. Et cela, au point ou à la virgule près!!!! Sinon ça ne fonctionne pas! Si tu utilises des mots que js (javascript) ne comprend pas, ça plante... Smiley decu

Voilà, je n'ai pas la prétention de vouloir tout t'apprendre, loin de là, mais il faudra que tu passes par un minimum de théorie Smiley cligne
@Arialia
Arialia a écrit :
il faut utiliser la coloration syntaxique approprié , n'utilise pas "code" il insère des retours chariots en trop ( en réalité l'editeur insère des <br> mais le style de code est du <pre> qui respecte les sauts de ligne ... du coup ils sont doublés, les autres types de coloration n'ont pas ce souci ) , prends "HTML" par défaut

A ce propos, j'ai un petit souci: lorsque je copie/colle du code en coloration syntaxique HTML etc. (sauf "code") depuis ce forum dans Notepad++, ce dernier ne fait pas de retour chariot. Peux-tu me dire comment remédier à ça? Merci d'avance!
@lddsoft : pfff ça doit faire presque 2 ans que je suis sous linux h24

je n'ai pas ce souci avec gedit, je suppose donc que c'est le fait que sous windows il faille le couple chr(13)+chr(10) pour faire un retour à la ligne alors que sous Unix seul chr(10) est nécessaire ....
@Arialia

Je te remercie pour ta réponse rapide.
Il se peut, en effet, qu'il s'agisse, une fois de plus, de ce problème de saut de ligne et de retour chariot avec Windows.
Quoi qu'il en soit, c'est bien dommage! Smiley decu
De plus, j'observe le même phénomène avec le Bloc-notes de Windows, l'éditeur PSPad et Komodo Edit.
Utilise Wordpad il a une option pour faire les retours de ligne à la unix si je me souviens bien

Et oui ça fait presque 30 ans que l'on subi cette incompatibilité de retour à la ligne entre Unix et MSDos ...
Bonjour à toutes et à tous,

pour notepad++, il faut allez dans la barre des menus sous paramétrage puis sous préférences et ensuite dans le bloc "format des sauts de lignes" vous cochez windows !

Et en principe, cela doit fonctionner.

Sinon pour répondre à la norme, c'est windows qui l'applique correctement.

--> ctrl 13 : "carriage return" provoque un retour du chariot au début de la ligne. Ici le retour chariot est en fait le curseur.

--> ctrl 10 : "line feed" provoque le passage à la ligne suivante mais le chariot (ou curseur) reste positionné sur la même colonne.

Sinon pourquoi avoir mis deux caractères ?

Car sur les télétypes, il faut exécuter deux mouvements différents !

Voir la table des codes ascii in english please :

LINE FEED : A format effector which advances the active position to the same character position of the next line.

CARRIAGE RETURN : A format effector which moves the active position to the first character position on the same line.

@+
Modifié par Artemus24 (27 Jun 2011 - 17:53)
Artemus24 a écrit :
pour notepad++, il faut allez dans la barre des menus sous paramétrage puis sous préférences et ensuite dans le bloc "format des sauts de lignes" vous cochez windows !

Désolé Artemus24, mais mon Notepad++ était déjà paramétré comme ça. Le problème doit être ailleurs.
En tout cas, très pédagogiques tes explications Smiley cligne
Bonjour à toutes et à tous,

j'ai cherché sur le NET la possibilité de re-initialiser les valeurs par défaut des liens selon les valeurs CSS, mais je n'ai rien trouvé. Je me demande si cela est possible à faire.

D'ailleurs lorsque vous sortez du document HTML, puis à nouveau, vous lancez le même document HTML, et bien, vous retrouvez exactement les mêmes couleurs comme si l'information avait été stocké quelque part dans la DOM de votre ordinateur. Je n'ai rien trouvé ni dans la DOM, ni une astuce pour ce RESET de la couleur des liens.

A moins que quelqu'un connaisse une astuce ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>test</title>
<script language="javascript" type="text/javascript" src="Show_Props.js"></script>

<!-- ------------------------------ -->
<!-- le code "Cascade Style Sheet"  -->
<!-- ------------------------------ -->
<style type="text/css">
body {
			background-color	: white;
			color				: black;
}

a			{color				: black;	}
a:link		{color				: red;		}
a:visited	{color				: maroon;	}
a:hover		{color				: green;	}
a:focus,
a:active	{color				: blue;		}
</style>

<!-- --------------------- -->
<!-- le code "Javascript"  -->
<!-- --------------------- -->
<script language="javaScript" type="text/javascript">
function test1()
{
	document.getElementById("lien").style.color = "yellow";
}

function test2()
{
	alert("Ca ne marche pas");
}

</script>
</head>

<body onload="show_props(window,'window');">
	<form>
		<input type="button" value="Changer la couleur des liens" onclick="test1();">
		<input type="button" value="Reinitialiser la couleur des liens" onclick="test2();">
	</form>

	<br />

	<a href="#1">test 1</a>	<br />
	<a id="lien" href="#2">test 2</a>	<br />
	<a href="#3">test 3</a>	<br />
</body>
</html>
Merci Artemus24 pour ce script somme toute assez clair.
Je me demande si le lien visité ne scotch pas dans le navigateur,
au point qu'il faut vider le cache pour arriver à réimposer une couleur originelle.

Un exercice plus simple pour expérimenter cette attribution de fonction js à un objet
serait de créer un bouton qui change la couleur du fond de page.
Et un deuxième qui réinitialise le background.
Et même 30 boutons avec 30 fonds de page différents... Smiley murf
J'ai essayé mais sans plus de succès.
Là, c'est BEAUCOUP plus simple! Smiley langue
Il suffit de modifier en javascript la valeur de backgroundColor de l'élément BODY.
Aide-toi et Google t'aidera!

Pour en revenir à la couleur des liens, je crois aussi que les valeurs sont mémorisées au niveau du navigateur installé sur le poste client. Javascript n'y a pas accès par mesure de sécurité.
Modifié par lddsoft (27 Jun 2011 - 20:09)
Pages :
Sujet clos
Aller à