Gestion dynamique des liens du menu barre

Si vous avez utilisé les codes proposés dans cet article, je vous recommande de prendre un peu de temps et d'utiliser le nouveau système myDesign qui est plus direct donc plus fiable.

Aidez-vous de mon générateur lien.

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

// sélection du bloc HTML concerné, partie barre
var menu_barre = document.getElementById("barre");

// création des nouveaux éléments HTML
var nvElt = document.createElement("li");
var nvLien = document.createElement("a");

// création du texte du nouveau lien
var texteNvLien = document.createTextNode("Bricabrac");

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

// création des attributs du nouveau lien
nvLien.href ="http://bricabrac.blog4ever.com/blog/index-490.html";
nvLien.title = "Visitez mon autre blog BRICABRAC";

// mise en place du texte du lien
nvLien.appendChild(texteNvLien);

// mise en place du lien au nouvel élément de la liste
nvElt.appendChild(nvLien);

// mise en place du nouvel élément à la liste
menu_barre.appendChild(nvElt);

// ]]></script>

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.

// sélection du bloc HTML concerné, partie barre
var menu_barre = document.getElementById("barre");

// Affectation variables des liens existants
var lien0 = menu_barre.getElementsByTagName("a")[0];
var lien1 = menu_barre.getElementsByTagName("a")[1];
var lien2 = menu_barre.getElementsByTagName("a")[2];
var lien3 = menu_barre.getElementsByTagName("a")[3];

// liens textes modifiés
lien1.style.width = "150px";
lien1.firstChild.data = "Mes articles";
lien2.style.width = "150px";
lien2.firstChild.data = "Album Photos";

// ]]></script>

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 :