⇐ ACCUEIL ⇐ Barre de Menu

Pour dynamiser vos blogs dans le cadre de mes labs, j'ai sélectionné quelques procédures intéressantes d'utilisations du Javascript avec le DOM (Document Objet Model), cette alliance permet d'accéder un peu par tout dans une page Web et de la personnaliser. Pour ceux qui pratiquent bien le CSS, ils y trouveront un plus qui va nettement améliorer leurs possibilités.

Je précise que ces codes sont à mettre :
- soit dans un article en mode HTML avec le nouveau composeur (actif sur l'article uniquement)
- soit dans la bordure gauche/droite (actif sur tout le blog)
- ou pour ceux qui connaissent le système de fichier externe lié

Dans un premier temps, j'aimerai avoir des testeurs, pour pouvoir, par la suite, réaliser un tuto plus détaillé, si nécessaire.
Mais surtout essayez et donnez-moi votre avis, d'avance merci.

Les codes que je vous indique, sont utilisés dans cet article, vous pouvez donc voir le résultat dans le menu barre ci dessus.

Vous pouvez copier le code encadré, les textes en vert sont des commentaires que vous pouvez laisser, mais les  textes en rouge sont à remplacer :

var texteNvLien = document.createTextNode(" texte du lien "); 
nvLien.href  =" adresse du lien ";
nvLien.title = " message de la bulle ";

Code pour créer un lien supplémentaire à la barre

  Comme un nouvel élément de la liste est créé à chaque nouveau lien, pour gérer les puces vous devez ajouter une ligne de code pour chaque lien :

nvElt.style.listStyleType = "none"; // pour supprimer les puces

ou bien sûr, mettre le style que vous souhaitez : square, circle, disc ou autre.

Un petit plus à chaque lien mettre une bulle avec messsage, qui s'affiche au survol de la souris.

lien0.title = " Message du premier lien ";
lien1.title = " Message du deuxième lien ";
lien2.title = " Message du troisième lien ";
lien3.title = " Message du quatrième lien ";

Code pour la création des bulles messages s'affichant au survol de la souris.

***

Plus utile pour certains blogs, modifier le texte des liens qui s'affichent automatiquement :

Accueil   Articles   Photos   Forum

Dans cet article, j'ai modifié que 2 des liens , le deuxième(lien1) et le troisième(lien2).
Petite explication en informatique, si des éléments sont numérotés, le premier est toujours le zéro, c'est pour cette raison que j'ai nommé la variable (var), du premier lien "lien0".

Donc si vous avez 4 liens : lien0, lien1, lien2, lien3

Pour chaque lien

lien#.style.width = " largeur du lien sile texte est long ";
lien#.firstChild.data = " texte du lien ";

Si vous avez plus de 4 liens, il faudra affecter chaque lien à une variable :

var lien4 = menu_barre.getElementsByTagName("a")[4];

var lien# = menu_barre.getElementsByTagName("a")[#];

Les # représentent les chiffres que vous créerez si nécessaire.

Code pour modifier le textes des liens existants.

Vous pouvez modifier totalement un lien existant :

// remplacement d'un lien automatique par un autre de votre choix 

lien2.firstChild.data = " texte du lien ";
lien2.href  =" adresse du lien ";
lien2.title = " message au survol ";

- changer le style du texte de chaque lien, donc leur personnalisation totale

// modifié en direct le style géré par votre CSS 

lien0.style.color = "#339966";
lien0.style.fontSize = "16pt";
lien0.style.fontFamily= "Comic sans MS";

lien0.style.fontWeight= "bold";

Remarque : au passage, je vous signale que les noms des styles ayant des tirets, il faut remplacer le tiret en mettant une majuscule à la première lettre du deuxième mot...

exemple : changer font-size  en fontSize

Je pense que vous comprenez, maintenant, les possibilités qui s'offrent à vous.

Voir également les articles :

• pour créer 2 liens supplémentaires
• mettre une image de fond différente à chaque lien

...