Barre de navigation en JavaScript
Les internautes n'apprécient pas vraiment que les pages soient divisées en plusieurs parties. Ce n'est pas non plus une bonne chose pour obtenir des backlinks. Cependant, cela peut quelquefois être nécessaire quand les pages sont trop longues, pour économiser la bande passante.
Nous allons donc montrer comment réaliser une barre de navigation, qui se présentera sous la forme suivante.
Page
On peut bien sûr varier la présentation avec une feuille de style.
On veut que la barre de navigation présent en grisé le lien (ou les liens) sur la page courante et en bleu les liens des autres pages.
Cela ne peut pas se faire avec l'attribut "a:active", car la couleur pour les pages visitées surclasse la couleur de la page active.
Il faudra donc utiliser CSS et JavaScript pour obtenir ce résultat.
Le code HTML de la barre de navigation
<p>Page
<span id="navbar">
<a class="navpage" href="page1.html" target="_top">Première</a>
<a class="navpage" href="page1.html" target="_top">1</a>
<a class="navpage" href="page2.html" target="_top">2</a>
<a class="navpage" href="page2.html" target="_top">>></a>
<a class="navpage" href="page2.html" target="_top">Dernière</a>
</span>
</p> On aura besoin de l'identificateur "navbar" pour localiser les modification de style en JavaScript, et de la classe "navpage" pour modifier individuellement le style de chaque lien.
La feuille de style
#navbar { border:1px solid gray; padding:2px; }
.navpage { color:blue; }
.graystyle { color:gray; }Cette définition permettra de modifier la couleur des liens.
Le code JavaScript
function pagebar()
{
var links=document.getElementById('navbar').getElementsByTagName("a");
var current = location.href;
for (var i=0; i < links.length; i++)
{
if(links[i].href == current)
{
links[i].href = "";
links[i].className='grayStyle';
}
}
} Le script construit la liste de tous les liens contenus dans la cadre "navbar". Il compare l'URL du lien avec celui de la page courante, en location.href, et lorsque il est identique, lui attribue le descripteur "grayStyle".