Créer un lien vers un endroit précis dans une page

Lun. 4 Fev. 2013

Article publié dans la catégorie Astuces Tutoriel Webdesign




Ancre de texte


Bonjour à toutes et à tous,

Pour créer un lien vers un endroit précis de la page, il est nécessaire de nommé une balise ( <h1> <div> <li> etc... ) grâce à l'attribut id et de faire pointer un lien vers elle en utilisant une ancre <a>.

On va prendre pour exemple que vous venez de constituer un lexique avec plusieurs mots et définitions. Pour faciliter l'accès à chaque mot sans que le visiteur n'est à descendre toutes la page, vous souhaitez faire un index alphabétique en haut de celle-ci et lorsque l'on clique sur une lettre, arriver directement à l'endroit ou ce trouve celle ci.

Pour commencer on va créer une <div> pour chaque lettres du lexique à qui on donnera un nom unique grâce à l'attribut id :

<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
<div id="d">D</div>
<div id="e">E</div>


etc....

Il faudra placer chaque <div> à l'endroit ou vous souhaitez que l'on arrive qu'en on clique sur la lettre correspondante, ce qui devrais vous donner simplement :

A
contenu de A
B
contenu de B
C
contenu de C
D
contenu de D
E
contenu de E

etc...


Maintenant il faut créer un lien vers ces lettres. Pour faire pointer un lien vers une des lettres, il suffit de placer son nom id précédé d'un dièse # dans l'attribut href d'une balise <a> comme suit :

<a href="#a" title="allez à la lettre A">A</a>
<a href="#b" title="allez à la lettre B">B</a>
<a href="#c" title="allez à la lettre C">C</a>
<a href="#d" title="allez à la lettre D">D</a>
<a href="#e" title="allez à la lettre E">E</a>

Voila ce que cela devrais vous donner :

A B C D E

Si vous cliquez sur l'une des lettres vous arrivez directement à celle qui correspond.

Arriver depuis un lien externe sur un endroit précis de la page


L'avantage avec cette solution, c'est que vous pouvez pointer directement sur un endroit précis de la page et ce, même depuis un lien externe. Pour cela il suffit de rajouté à la fin de l'adresse de votre page un dièse # suivi du nom que vous avez donné à la balise id comme suit :

http://www.orditips.com/article-71059-creer-un-lien-vers-un-endroit-pr.html#e

Si vous cliquez, vous devriez normalement arriver directement à la lettre E !


En conclusion...

Vous pouvez bien entendu créer autres chose qu'une index alphabétique,  Vous pouvez notamment créer un bouton " haut de page "  qui couplé avec l'index ouvre de grandes possibilités. Cela vous donne simplement un apercu de comment bien l'exploiter.

Maintenant il ne vous reste plus qu'à vous lancer !

à la prochaine pour de nouveau tuto et n'hésitez pas à poser vos questions au besoin ;)

Christian Aslan



Si vous avez apprécié ce tutoriel, n'hésitez pas à le partager ou à laissez votre commentaire !


 
• Autres articles pouvant vous intéresser :
Redirection 301 - Prestashop
Créer une carte de france intéractive avec Gimp
Panier déroulant avec Jquery Easing Plugin
Nouvautès sur OrdiTips ! Kit graphiques et templates en téléchargement gratuit
Color Scheme Designer 3 - Trouver la bonne association de couleurs !


• Catégories liées :
webdesign
tutoriel
astuce


• Commentaires : Cliquez ici pour laisser un commentaire

 
Aucun commentaire n'a été laissé sur cet article. Soyez le premier à laisser un commentaire !
 

 
 
  Créez un site ou une boutique en ligne facilement et gratuitement