Bonsoir
Alouqua World étant sur le point de fermer, j'ai eu l'autorisation d'Alouqua de reprendre ses tutos pour les mettre ici. Seuls ses tutos sont repris !


Elle est bien souvent utilisée pour le défilement de logo sur les forums et donc beaucoup d'entre nous l'utilise .
La balise de base est donc celle ci

Code:

<marquee>Défilement de base</marquee>

Ce qui donne :
Défilement de base

Comme vous le constatez c'est déjà un défilement mais qui n'a aucunes limites de place et qui va toujours vers la gauche , vous pouvez bien entendu l'utiliser comme ca mais je vais vous montrer comment personnaliser votre défilement .

Tout d'abord les directions
Défilement vers la droite

Code:

<marquee direction="right">Défilement vers la droite</marquee>

Défilement vers la gauche

Code:

<marquee direction="left">Défilement vers la gauche</marquee>

Défilement vers le haut

Code:

<marquee direction="up">Défilement vers le haut</marquee>

Défilement vers le bas

Code:

<marquee direction="down">Défilement vers le bas</marquee>

Vous pouvez également donner une vitesse au défilement en ajoutant scrollamount

Vitesse normale

Code:

<marquee direction="left" scrollamount="2">Vitesse normale</marquee>

En remplacant le chiffre 2 par un chiffre plus élevé , la vitesse sera plus rapide
Défilement plus rapide

Code:

<marquee direction="left" scrollamount="20">Défilement plus rapide</marquee>

Pour la plupart , nous utilisons tous le défilement dit "normal" mais il existe trois types de déplacement avec le behavior

Déplacement normal

Code:

<marquee direction="left" scrollamount="2" behavior="scroll">Déplacement normal</marquee>

Défilement qui s'arrete

Code:

<marquee direction="left" scrollamount="2" behavior="slide">Défilement qui s'arrete</marquee>

Défilement en va et vient

Code:

<marquee direction="left" scrollamount="2" behavior="alternate">Défilement en va et vient</marquee>

Pour personnaliser avec les propriétés CSS nous allons le faire avec un style comme pour une div

Code:

<marquee style="background:white;border:1px solid black;color:black;height:20px;width:300px;margin:auto;" scrollamount="3">Texte ou image</marquee>

Ce qui donne
Texte ou image

Dernière chose , je vais vous montrer comment faire pour que le défilement s’arrête au passage de votre souris
Voici ce que vous devrez ajouter dans la balise

Code:

onMouseOver="this.stop();" onMouseOut="this.start();"

Merci de votre attention