Faire une liste défilante de textes avec des liens

Index de tous les articles
Rubrique "Pour bien démarrer"
Initiation langage HTML
Vos textes
Les images
Personnaliser son blog
Gadgets à gogo
Astuces
Voir mon avatar

1. Liste défilante de textes avec des liens

On a parfois des listes à afficher, un peu longues, et pour lesquelles on souhaite faire des liens.
Ces liens peuvent mener vers d'autres pages de votre blog, ou bien vers d'autres sites internet.

L'avantage d'une liste défilante avec liens est :

* le gain de place si la liste est longue,

* comme pour toutes les animations, l'attraction sur les visiteurs. (Il est prouvé que l'oeil est d'abord attiré par le mouvement.)

---

 
2. Comment faire une liste défilante avec des liens

2.1 Faire une liste avec des liens

Le plus simple est de faire d'abord votre liste, en prenant soin d'aller à la ligne après chaque élément.

Vous ferez aussi sa mise en forme : typo, couleur, taille du texte, alignement...


2.2 Vous ajoutez ensuite les liens sur chaque élément.

Pour mémoire, cliquez ici pour voir comment faire des liens hypertexte.

Vous avez alors au minimum un code HTML sous cette forme :

<a href=”adresse de la page liée n 1 ”>Texte de votre lien 1</a></br>
<a href=”adresse de la page liée n 2”>Texte de votre lien 2</a></br>


Code complet de liste liée avec mise en page

<a href="http://adresse page liee 1.html"><span style="font-family: comic sans ms,sans-serif;"><span style="font-size: 12pt;"><span style="color: #0000ff;">I</span><span style="color: #0000ff;"><span style="color: #0000ff;">ndex</span> de tous les articles</span></span></span></a><br /><span style="color: #0000ff;"><span style="font-family: comic sans ms,sans-serif;"><span style="font-size: 12pt;">

<a href="http://adresse page liee 2.html"><span style="color: #0000ff;"><span style="font-family: comic sans ms,sans-serif;"><span style="font-size: 12pt;">Rubrique</span></span></span><span style="color: #0000ff;"><span style="font-family: comic sans ms,sans-serif;"><span style="font-size: 12pt;"> "Pour bien demarrer"</span></span></span></a>


2.3 Ajouter ensuite la balise de défilement

Avant votre code HTML de votre liste, vous ajoutez :

<marquee behavior="scroll" direction="up" height="xxx" width="xxx" scrollamount="x" scrolldelay="x"
onmouseover="this.stop()" onmouseout="this.start()"
<p>

puis vous trouvez les éléments de votre liste avec leur mise en forme et leurs liens, comme en chapitre 2.2

* Après, vous ajoutez :
</p>
</marquee>


2.4 Paramètres du défilement

Pour revoir les différents paramètres de la balise de défilement Marquee, cliquez ICI.


2.4.1 Sens et vitesse de défilement

N'oubliez pas de paramétrer le défilement : vitesse, sens....  Le sens le plus utilisé pour ce type de liste est "up".

2.4.2 Conseil de paramétrage supplémentaire

Ajouter les paramètres qui permetent d'arrêter le défilement au survol de la souris. Ces apramètres sont vivement conseillés dans le cas d'une liste défilente avec liens, et en aprticulier si votre vitesse de défilement est élevée.

Sinon, votre visiteur risque de faire un clic non pas sur l'élement de la liste de son choix mais sur un élément au dessous.

Paramètres à ajouter :

onmouseout="this.start()" onmouseover="this.stop()"


3. Code complet d'une liste défilante avec liens


<p style="text-align: center;"><marquee scrolldelay="1" scrollamount="2" width="400" height="100" direction="up" onmouseout="this.start()" onmouseover="this.stop()">

<div style="text-align: left;"><a href="http://www.over-blog.com/com-1109493945/123Miam_Miam.html"><span style="font-family: comic sans ms,sans-serif;"><span style="font-size: 12pt;"><span style="color: #0000ff;">I</span><span style="color: #0000ff;"><span style="color: #0000ff;">Index de tous les articles</span></span></a><br />

<span style="color: #0000ff;"><span style="font-family: comic sans ms,sans-serif;"><span style="font-size: 12pt;"><a href="http://faireunblog.over-blog.com/pages/5_articles_a_lire_pour_demarrer_votre_blog-2051604.html"><span style="color: #0000ff;"><span style="font-family: comic sans ms,sans-serif;"><span style="font-size: 12pt;">Rubrique</span></span></span><span style="color: #0000ff;"><span style="font-family: comic sans ms,sans-serif;"><span style="font-size: 12pt;"> "Pour bien d&eacute;marrer"</span></span></span></a></span></span></span><span style="color: #0000ff;"><span style="font-family: comic sans ms,sans-serif;"><span style="font-size: 12pt;"><br />

autres éléments de ma liste.....<br />
</div>
</marquee></p>



 

---

* 5 articles a lire pour demarrer votre blog * Initiation au langage HTML * Tout pour modifier et embellir vos textes * Tout savoir sur les images  * Des gadgets * Votre blog ne ressemblera pas aux autres * Mes astuces * Référencements et indexations * Index des articles

Comments

[tiot]

salut


c'est très intéressant


bonne journée

[Nadine Quinn]

C'est très bien mais la migration a commencé; est ce que cet article peut être mis sur la nouvelle version d'overblog.


Bon week-end


Nadine

[Aurelie]

Je ne sais pas, je n'y suis pas encore... essayez

[Tristan]

Ce que je cherche, c'est comment faire un lien mot un peu quand tu clique sur un texte et que ce soit un lien.

[Aurelie]

La réponse à ta question est ici :


http://faireunblog.over-blog.com/article-mettre-des-liens-en-texte-39593955.html

[Chantal74]

Super tous ces conseils.. merci, c'est une chouette idée
voilà qui va me servir.. trop mignon aussi le petit chat.
bonne nuit
chantal

[bricabrocamoi]

Merci de ton passage. Bonne soirée. $$$

[mariellen]

super, c'est justement ce dont j'avais besoin, bsious Aurélie $$

[Aurelie]

Il fallait demander ! Bises

[Louly cot cot cot]

Gros bisous + clic $$$

[krystele]

BROUM BROUM........................................


.........................tut tut !!!.....................................................


.........................J'arrive en camion chargé de com's..........


.........................Rien que pour toi .....................................


.........................Te souhaiter un tres bon dimanche


.................|"""""""""""""""""""""""""""""""|""|||____


.................|.............¤BISOUS¤.............|||....|""....__.......


.................|___________________________|_|__|,,


........................."((...))..((..))"^^^^^^^^^^^^^^^^((..))


......................... krystele

[JANY]

bonsoir,
j'espère que tu vas bien et que tu passes un excellent week-end, je viens te souhaiter une très bonne nuit. gros bisous.
Jany.

[Aurelie]

Merci a toi et je viens chez toi..

[cerisette et l'art]

bon week end
bisous $$$$$$$$