Naviguer dans une page grâce aux ancres

Publié le par PêUR

Mise à jour le 18/09/2006 22:32

 

Exemple

Aller à l'objectif de l'article
Aller au paragraphe suivant

 

Ancres personnalisées

Cela peut paraître étrange mais vous devez d'abord créer l'ancre avant le lien.

Créer une ancre

En mode HTML, cherchez l'endroit où vous voulez créer une ancre (devant un titre de paragraphe, un mot précis, etc.) Placez-y devant, le code suivant:

<a name="ancre1"></a>

Vous pouvez mettre à la place de ancre1 ce que vous voulez. Veillez juste à ce que le nom de l'ancre soit unique dans la page, qu'il ne comporte pas d'espace, d'accent ou de caractères exotiques, enfin, évitez les majuscules.

Pour les Over-blogueurs et les utilisateurs de FCKeditor, vous verrez en repassant en mode normal (WYSIWYG) le pictogramme . Il caractérise l'ancre que vous avez créée.

Maintenant, créons un lien qui redirige vers cette ancre.

Créer un lien vers l'ancre

Les Over-blogueurs et les utilisateurs de FCKeditor peuvent s'affranchir de mettre leur nez dans le code HTML pour créer ce lien. Pour cela, sélectionnez l'image, le mot ou la petit phrase qui doit rediriger vers l'ancre; Cliquez sur le bouton "créer/modifier lien" de la barre d'outils de l'éditeur; dans la liste déroulante "Type de Lien" sélectionnez "Ancre dans cette page". Deux nouvelles listes déroulantes apparaissent (cf. Figure 1). Dans la liste "Sélectionner une Ancre Par Nom d'Ancre" choisissez une des ancres que vous avez créée. Pour notre exemple, sélectionnez ancre1.


Figure 1

Pour les autres utilisateurs, passez en mode source et créez un lien en veillant à mettre en reférence de lien (href) le nom de l'ancre précédé du caractère dièse (#). Pour notre exemple:

<a href="#ancre1">Aller vers l'ancre 1</a>

Cas d'une ancre sur une autre page

Si vous voulez créer un lien qui pointe sur une autre page possédant une ancre, le nom seul de l'ancre précédé de # ne suffit pas. Il faut aussi donner l'url de la page comportant l'ancre. La référence de lien devient:

Url de la page + # + nom de l'ancre
http://peutetreunereponse.net/article-225689.html#ancre1

Soit:

<a href="http://peutetreunereponse.net/article-225689.html#ancre1">Aller vers l'ancre 1</a>

 

Top: ancre par défaut

Il existe une ancre que vous n'avez pas besoin de créer, c'est l'ancre pour aller en haut d'une page. Elle porte le nom top. Vous pouvez donc créer directement des liens qui y font référence:

<a href="#top">Aller vers le haut</a>
Aller vers le haut

 

Utiliser des identifiants existants comme ancre

Le code source de vos page est structuré en différents blocs grâce à l'utilisation de div avec identifiant. Ces identifiants sont uniques et permettent au CSS et au javascript de se référer à ces éléments déterminés. On peut aussi les utiliser comme ancre. Pour cela, il suffit dans le lien de faire référence à l'identifiant plutôt qu'à un nom d'ancre.

Exemple pour comprendre

Dans ma colonne de gauche, mon bloc comportant le champs de saisie pour s'abonner à la newsletter a pour identifiant <div id="abonnement">...</div>. Je souhaite qu'en cliquant sur un lien "abonnez-vous" mon visiteur soit redirigé vers ce champs de saisie. Plutôt que de créer une ancre de la forme <a name="ancre-abo"></a> et le lien qui va bien, je vais utiliser l'identifiant abonnement qui existe déjà (Ben oui, je suis feignant) et créér le lien:

<a href="#abonnement">Abonnez-vous</a>
Abonnez-vous

Trouver les identifiants

Bon, vous allez me dire: «PêUR, c'est bien beau, on gagne du temps mais comment je les trouve, moi, les identifiants de ma page?». Ok, Ok, je suis allé un peu vite. Pour repérer vos identifiants, il faut afficher le code source de la page.

  • Sous Internet Explorer: Cliquez dans la barre de menu sur "Affichage" > "Source"
  • Sous Firefox: faite Ctrl + u

 

Ensuite, vous cherchez l'endroit qui vous interesse par exemple sur mon blog on pourrait chercher "cont@ct" (colonne de gauche sous l'abonnement à la newsletter). Faite Ctrl + f pour lancer une recherche et saisissez "cont@ct". Vous allez être dirigé vers la première occurence du mot "cont@ct". Cherchez en amont de ce mot une div avec identifiant. Vous l'avez trouvé? Allez, je vous aide: <div id="contact">...

Voila vous avez trouvé l'identifiant à utiliser: contact

 

Cas pratique: faire un lien vers un commentaire précis

Cela m'arrive parfois de faire une réponse pertinente à une question récurente sur mon blog. Pour éviter de copier/coller ma réponse je préfère rediriger le "commentateur" vers la réponse que j'ai faite précédement. Plutôt que dire «Va voir la réponse du commentaire N°81 de cet article», j'utilise l'ancre du commentaire générée par Over-Blog.

Pour repérer cette ancre, il suffit de chercher dans le code source de l'article le numéro du commentaire qui vous intéresse. Dans mon exemple, je fais Ctrl + f et je cherche le texte "commentaire n° 81". Ensuite, recherchez en amont l'ancre qui est de la forme:

<a name="comment1856125" id="comment1856125" ></a>

Il ne vous reste plus qu'à utiliser ce nom d'ancre pour rediriger vers ce commentaire:

<a href="http://www.peutetreunereponse.net/article-1175702-6.html#comment1856125">Aller au commentaire n°81</a>
Aller au commentaire n°81

 

Attention

  • Certains navigateurs interprètent mal les ancres dans un tableau. A éviter donc.
  • Sous Firefox, si vous cliquez sur un lien qui redirige vers une ancre d'une autre page, il est possible après l'affichage de la page en question, que le saut vers l'ancre ne se fasse pas. En effet Firefox gère mal les ancres externes sur les attributs name... Par contre cela fonctionne très bien sur les attributs id.

Publié dans Webdev

Commenter cet article

mahina 29/01/2007 13:48

Peur, j'ai besoin de tes lumières..J'ai suivi un stage pour formation de site . J'ai donc 2 questions
1/on a utilisé NVu, j'ai essayé de l'utiliser pour l'article résultats(http://www.lachaumontaise.com/article-5436694.html), mais cela me donne un code source à rallonge, si je l'avais fait directement sur over-blog, est-ce que cela aurait été plus concis? ( là, l'article n'a pas tenu en entier)
2/ nous avons appris à faire des ancres et sur over-blog, je me suis aidée de ton article pour mettre le lien de l'ancre ( au début, je faisais tout en source) , mais si le lien "haut" pour remonter fonctionne sans soucis, celyui qui doit me faire redescendre au tableau de "Féférale A" ne veut pas marcher... Peux-tu éclairer ma lanterne?
lien de l'article avec les ancres:
http://www.lachaumontaise.com/article-5441693.html

merci tout plein.... sourire...

PêUR 30/01/2007 04:08

Bonjour Mahina,1/ Sans voir le code généré c'est difficile à dire, mais je pense que non, car NVu l'HTML et que c'est un langage standard. Par contre l'éditeur d'OB rajoute de manière générale beaucoup de code mort qui ne sert à rien et qui rallonge la source, surtout si on utilise le changement de couleur, taille et famille de police.2/ As-tu lu le dernier paragraphe de mon article? Je te le retranscris ici:  Certains navigateurs interprètent mal les ancres dans un tableau. A éviter donc. Voili voilà :)

PiR2 18/09/2006 11:25

"Firefox gère mal les ancres externes."

a id="quelquechose"

à la place de

a name="quelquechose"

Quelqu'un peut m'expliquer pourquoi la balise code ne fonctionne pas pour les commentaires ? Merci

PêUR 18/09/2006 22:31

Merci pour cette précision (j'ai modifié mon article)
Si les balises ne marche pas, c'est volontaire, c'est pour éviter les abus de html, javascript ou css malveillant ;-)

PiR2 18/09/2006 11:23

"Firefox gère mal les ancres externes."

Pour contourner ce petit problème, il suffit d'utiliser


à la place de


normalement un lien du type href="http://nomdusite.org/nomdepage.htm#quelquechose" fonctionnera correctement sous Firefox et IE.

Sorry pour le double post

PiR2 18/09/2006 11:19

"Firefox gère mal les ancres externes."

Pour contourner ce petit problème, il suffit d'utiliser à la place de

normalement un lien du type href="http://nomdusite.org/nomdepage.htm#quelquechose" fonctionnera correctement sous Firefox et IE.

Amandine 01/07/2006 15:03

Génial. Je l'ai fait pour le lien de mon livre d'or qui se trouve en page d'accueil. Je voulais qu'on arrive en haut de l'article, alors qu'avant on arrivait sur le 1er commentaire. Ca fonctionne nickel.
Qu'est ce qu'on ferait pas sans toi !

PêUR 03/07/2006 17:35

Rolala merci...