Faire une liste défilante en code HTML

Apprendre
à faire
une liste défilante
qui s'arrete
au survol de la souris
Lisez cet article !

1. Faire une liste défilante verticale

Les listes défilantes sont utiles si on souhaite afficher un grand nombre d'éléments d'une même rubrique, sans pour cela prendre trop de place à l'écran.

La liste défilante a aussi l'avantage d'être mobile, et donc d'attirer l'oeil du visiteur !

---

2. code HTML

2.1 Balise MARQUEE

Le principe du défilement se fait avec la balise MARQUEE, dont on a déjà parlé.
Revoir les informations complètes sur la balise de défilement MARQUEE ICI.

Il faut absolument lui donner un sens de défilement vertical, avec l'information de direction "UP".
Le code minimum à insérer est donc :

<marquee behavior="scroll" direction="up"
.....
</marquee>


2.2 Arrêter le défilement au survol de la souris

Pour faciliter la lecture de la liste, il est fortement conseillé d'offrir la possibilité d'arrêter son défilement, quand la souris de votre visiteur passe par dessus.

Pour cela, ajouter à votre code :

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


2.3 Les éléments de la liste

A la fin de chaque élément, on ajoutera <br /> pour demander un retour à la ligne (sauf pour le dernier).

Les élements de votre liste seront donc à inscrire ainsi :

Element 1<br/>
Elément 2<br/>
Elément 3<br/>
...
Dernier élément


2.4 La taille d'affichage de la liste

Height définit la hauteur de votre liste, et Width sa largeur.

Il est conseillé de définir une largeur suffisante pour que chaque élément puisse être affiché en entier dans sa largeur !

2.5 La vitesse de défilement

Vous connaissez déjà cette information si vous avez lu l'article sur les balises MARQUEE, il s'agit de  scrollamount et scrolldelay

2.6 Synthèse

Le code complet à copier en édition avancé dans votre article ou votre module est :

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

Element 1 de la liste<br />
Element 2 de la liste<br />
Element 3 de la liste<br />
Element 4 de la liste<br />
..............................<br />
</p>
</marquee>

où vous remplacez les éléments de la liste par les vôtres. 

3 Exemple complet d'une liste vertical défilante

3.1 La liste défilante

 
Les compteurs de visites
Image changeante au survol de la souris
Mon blog passe à la télévision !
Connaître l'adresse URL de ses documents
Enregistrer vos images pour votre blog
Mettre une photo en fond d'article (ou de module)
Tout comprendre sur le flux RSS
Votre site en page de démarrage
les 5 règles d'Or pour construire votre site web
Mettre une horloge sur votre blog

3.2 Le code complet de cette liste défilante :


<marquee scrolldelay="1" scrollamount="3" width="400" height="200" direction="up" onmouseout="this.start()" onmouseover="this.stop()"><span style="font-family: comic sans ms,sans-serif;"><span style="font-size: 10pt;">Les compteurs de visites<br />Image changeante au survol de la souris<br />Mon blog passe &agrave; la t&eacute;l&eacute;vision !<br />Conna&icirc;tre l'adresse URL de ses documents<br />Enregistrer vos images pour votre blog<br />Mettre une photo en fond d'article (ou de module)<br />Tout comprendre sur le flux RSS<br />Votre site en page de d&eacute;marrage<br />les 5 r&egrave;gles d'Or pour construire votre site web<br />Mettre une horloge sur votre blog</span></span></marquee>

---

---

Comments

[bfrance]

Ça semble être facile à faire cette liste défilante, je vais l'essayer. Par contre j'ai peur que si j'ajoute de plus en plus de gadgets sur mon blog que ça
ralentisse l'ouverture des pages.  Lorsque je viens ici je m'amuse à découvrir tous tes gadgets et tes conseils, mais il est de plus en plus difficile pour moi d'y venir, la page gèle et
c'est long à ouvrir snif.


France

[Aurelie]

Oui, c'est vrai, ça alourdit. Il faut donc choisir les préférés !

[tiot]

salut


va falloir que j'en fasse une pour mes liens


bonne soirée

[Swann]

yeahhh ça c'est carrément bon à savoir,merci beaucoup !!


et merci d'être passée du côté de chez moi :)


Bon dimanche !!

[Eliane]

Bonjour,


merci !
**       **       **      
**       **       **
Ce matin au levé, un ciel dégagé
une luminosité a nettoyé les vitres !

Une petite marche programmée
et du vélo pour les enfants
Le soleil est la, mais il ne chauffe pas

Belle journée           A bientot Parfums de
Campagne    €lian€

[Krio]

un petit coucou en ce vendredi ! bonne journée !$

[Belbe]

intéressant je découvre ... je vais revenir ..


je clic de soutien .. aussi ....


Bien à toi !

[Veronique Brosseau]

merci pour ton passage, des trucs intéressants ici !$$$

[Aurelie]

N'hésite pas à revenir ! Bises

[christelle]

bonsoir, moi qui aime les ascenceurs..; je vais pouvoir encore bien "m'amuser"..; encore merci de tes articles qui mettent en valeur nos blogs.. bravo !!!

[sullilaeti]

Salut, je voudrais de l'aide pour faire un sondage dans la mis en page de mon site, dans texte libre, je voudrais faire un sondage, j'ai essayer avec pixule mais le format est trop grand et quand
j'essai de le diminuer manuellement sa ne fonctionne pas, peut tu me donner un autre site qui pourrais marché, il me faudrais un format environ 180 pixel.


J'ai essayer avec d'autre site mais quand je copie le code html, over blog me di qu'il y a un truc qui n'est pas compatible, je me souvien plus du non je c'est que sa commence par "ja", c'est un
drole de nom.


Aide moi STP

[Aurelie]

Pixule est vraiment le site top pour les sondages. tu peux modifier la taille en allant dans le code : width et height, valeurs à changer

[Steve]

Cliiiiiiiiiic quotidien, pas grand chose à dire a part que...


C'EST LES VACANCES !!!


Bonne journée, Steve