Voila j'ai pris ca sur le forum des forums
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 :
- Code:
-
<marquee>VOTRE TEXTE ICI</marquee>
==> Un simple défilement d'image - horizontal ( <=> espace):
- Code:
-
<marquee><img src="http://URL_image1"></img> <img src="http://URL_image2"></img> <img src="http://URL_imagen"></img></marquee>
==> Un simple défilement d'images - vertical (
<=> saut de ligne):
- Code:
-
<marquee direction="up"><img src="http://URL_image1"></img><br><img src="http://URL_image2"></img><br><img src="http://URL_imageN"></img></marquee>
/!\ Selon que vous faites défiler des images horizontalement ou verticalement, n'oubliez pas d'insérer   ou
; ce ne sera plus mentionné par la suite mais ne l'oubliez pas !
==> Défilement d'images avec liens (partenaires) :
- Code:
-
<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 :
- Code:
-
<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 :
- Code:
-
<marquee id="id1"><span onmouseover="getElementById('id1').stop();" onmouseout="getElementById('id1').start();">VOTRE TEXTE ICI ou IMAGES</span></marquee>
Pour les images :
- Code:
-
<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 :
- Code:
-
<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...