TUTORIAL - Défilement

Bonjour à tous !

Je crée ce petit tutorial sur les défilements car c'est une question qui revient assez souvent ces derniers temps. Les codes sont à mettre dans un bloc du portail, dans la page d'accueil ou dans la description d'un forum en cliquant sur <>...

Le nom de la balise en question : marquee
Les différents attributs de cette balise :
id : identifiant,
scrolldelay : temps en milliseconde entre chaque déplacement,
scrollamount : pas en pixel entre chaque déplacement,
height, width : hauteur et largeur en pixel de la fenêtre de défilement,
direction : sens de défilement
:: UP => de bas vers le haut,
:: DOWN => de haut vers le bas,
:: LEFT => de droite vers la gauche [par défaut],
:: RIGHT => de gauche vers la droite.
behavior : comportement du défilement
:: ALTERNATE => en alterné
:: SCROLL => défilement [par défaut],
:: SLIDE => glissement d'un bord vers l'autre.
loop : nombre de défilements - si non précisé => boucle à l'infini [par défaut]

Dans notre cas, les attributs behavior et loop n'ont pas d'intérêt si on ne fait que du défilement...

Fini la théorie, passons à la pratique et voilà quelques codes utiles :
/!\ Ce qui apparait en rouge : votre texte, vos images, vos liens
/!\ Ce qui apparait en vert : le nom de l'identifiant qui doit être le même

==> Un simple défilement de texte :

Citation :

<marquee>VOTRE TEXTE ICI</marquee>

==> Un simple défilement d'image - horizontal (&nbsp; <=> espace):

Citation :

<marquee><img src="http://URL_image1"></img>&nbsp;<img src="http://URL_image2"></img>&nbsp;<img src="http://URL_imagen"></img></marquee>

==> Un simple défilement d'images - vertical (
<=> saut de ligne):

Citation :

<marquee direction="up"><img src="http://URL_image1"></img>
<img src="http://URL_image2"></img>
<img src="http://URL_imageN"></img></marquee>

/!\ Selon que vous faites défiler des images horizontalement ou verticalement, n'oubliez pas d'insérer &nbsp ou
; ce ne sera plus mentionné par la suite mais ne l'oubliez pas !

==> Défilement d'images avec liens (partenaires) :

Citation :

<marquee><a href="http://URL_lien1" target="_blank"><img src="http://URL_image1"></img></a><a href="http://URL_lien2" target="_blank"><img src="http://URL_image2"></img></a><a href="http://URL_lienN" target="_blank"><img src="http://URL_imageN"></img></a></marquee>

==> Défilement avec arrêt et reprise lors du passage de la souris :
1ère version -- le défilement s'arrête quand la souris passe sur le champ du défilement :

Citation :

<marquee onmouseover="this.stop();" onmouseout="this.start();">VOTRE TEXTE ICI ou IMAGES</marquee>

2ème version -- le défilement s'arrête quand la souris passe sur un élément :
Pour le texte :

Citation :

<marquee id="id1"><span onmouseover="getElementById('id1').stop();" onmouseout="getElementById('id1').start();">VOTRE TEXTE ICI ou IMAGES</marquee>

Pour les images :

Citation :

<marquee id="id1"><img src="http://URL_image1" onmouseover="getElementById('id1').stop();" onmouseout="getElementById('id1').start();"></img><img src="http://URL_image2" onmouseover="getElementById('id1').stop();" onmouseout="getElementById('id1').start();"></img><img src="http://URL_imageN" onmouseover="getElementById('id1').stop();" onmouseout="getElementById('id1').start();"></img></marquee>

Pour les images avec liens :

Citation :

<marquee id="id1"><a href="http://URL_lien1" target="_blank"><img src="http://URL_image1" onmouseover="getElementById('id1').stop();" onmouseout="getElementById('id1').start();"></img></a><a href="http://URL_lien2" target="_blank"><img src="http://URL_image2" onmouseover="getElementById('id1').stop();" onmouseout="getElementById('id1').start();"></img></a><a href="http://URL_lienN" target="_blank"><img src="http://URL_imageN" onmouseover="getElementById('id1').stop();" onmouseout="getElementById('id1').start();"></img></a></marquee>

Il est possible, à présent, de personnaliser le défilement de son texte :
Dans la balise marquee, il suffit de rajouter ce code :
style="ATTRIBUT de STYLE: VALEUR;"
Les différents attributs de style :
:: HEIGHT et WIDTH pour la hauteur et largeur du défilement,
:: BACKGROUND-COLOR pour modifier la couleur de fond,
:: BACKGROUND : URL('http://URL_image_fond'); BACKGROUND-ATTACHMENT: FIXED; pour mettre une image de fond fixe,
:: COLOR pour modifier la couleur du texte,
:: FONT-SIZE pour modifier la taille du texte,
:: TEXT-ALIGN pour modifier l'agencement du texte (LEFT, RIGHT, CENTER ou JUSTIFY)

Il existe encore d'autres styles à appliquer mais là, il faut chercher par vous-même...

Pour conclure, je vous mets un petit lien ici avec des illustrations et le code source...

Amicalement, SanDream