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
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 à la télévision !<br />Connaî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émarrage<br
/>les 5 règles d'Or pour construire votre site web<br />Mettre une horloge sur votre blog</span></span></marquee>
![]() |
![]() ![]() |