L'élément <marquee> permet de créer des zones de défilement de textes, d'images fixes (.jpg, .png) ou animées(.gif) ou même d'animations Flash, dans un document HTML. L'avantage de cet élément est sa mise en oeuvre facile et son code compact, mais il est possible d'obtenir le même effet avec des scripts.
Par défaut <marquee> assure un défilement de l'objet qu'il contient, horizontalement et de droite à gauche, des attributs permettent de modifier les paramètres de ce déplacement
Par défaut <marquee> a une largeur de 100%, il peut donc être considérée comme un élément de type block. Pourtant si vous lui attribuez une valeur inférieure à 100%, vous pourrez constater que <marquee> a un comportement inline par rapport au texte qui l'entoure.
La largeur par défaut de l'élément <marquee> étant égale à la largeur de l'élément parent, quand un élément <marquee> est inclus dans une cellule dont
la largeur n'est pas spécifiée, vous devez fixer la largeur de <marquee> , avec l'attribut witdh ou de préférence avec les css.
Attention, si aucune largeur n'est spécifiée, ni pour <marquee> ni pour l'élément parent, la largeur de <marquee> est réduite d'office à 1px et le défilement n'est pas visible.
A la base, cette balise était la réponse de Microsoft à la balise <blink> (une balise qui permet de faire clignoter du texte, pas bling-bling) de son concurrent Netscape. Cette balise n'a donc été reconnue par Netscape qu'à partir de NS7. Elle est jugée obsolète par certains développeurs qui en déconseillent l'usage.
Selon le site htmlcodetutorial , "<marquee> est souvent considérée comme une des "balises diaboliques" et cette perception est pour certains une raison suffisante d'en éviter l'usage. Cependant utilisée avec parcimonie et prudence (et en étant conscient qu'elle ne fonctionne pas partout), <marquee> n'est pas une si mauvaise balise. Elle peut être fort utile pour l'affichage d'annonces"
En revanche selon le site kiwano.fr , "la balise <marquee> c'est le mal car, si on laisse de côté les considérations ergonomiques, elle ne porte pas de valeur sémantique. C'est pour cela qu'elle est devenue obsolète et qu'il ne faut donc pas l'utiliser."
La balise <marquee> peut recevoir douze attributs dont certains sont des archaïsmes qu'il vaut mieux éviter d'utiliser.
Les six attributs ci-dessous sont des archaïsmes qui permettent une mise en forme plus que sommaire de l'élément <marquee> . Il est fortement recommandé d'utiliser le stylage par les css qui est plus conforme aux standards du W3C et qui offre pour la mise en forme de cet élément, un éventail de propriétés bien plus variées que n'en offrent les attributs.
| align | Définit l'alignement du texte ou de l'image dans l'élément </marquee>. |
|---|---|
| bgcolor | Définit la couleur d'arrière-plan de l'élément </marquee>. Attention, Internet Explorer n'interprète pas le codage couleur en hexadécimal à trois chiffres, si vous tenez à utiliser cet attribut, pensez à utiliser l'hexadécimal à six chiffres ou les mots-clefs de couleurs. |
| height | Définit la hauteur (en pixels, %, em) de l'élément </marquee>. |
| hspace | Définit l'espace horizontal (en pixels, %, em) entre le texte ou l'image et le bord gauche ou droit de l'élément </marquee>. C'est l'équivalent des padding horizontaux. (Je n'ai pas compris comment fonctionne cet attribut, mais peu importe). |
| vspace | Spécifie l'espace vertical (en pixels) entre le texte ou l'image et le bord supérieur ou inférieur de l'élément </marquee>. C'est l'équivalent des padding verticaux. (Je n'ai pas compris comment fonctionne cet attribut, mais peu importe). |
| width | Définit la largeur (en pixels, %, em) de l'élément </marquee> |
L'utilisation de ces six attributs est indispensable si l'on souhaite paramétrer le déplacement de l'objet, texte ou image, placé dans l'élément </marquee>.
| Behaviour | Définit le comportement (scroll, slide, alternate) du texte ou de l'image dans l'élément </marquee>. |
|---|---|
| direction | Définit la direction (left, right, up, down) de défilement du texte ou de l'image dans l'élément </marquee>. |
| loop | Introduit une boucle qui permet de repasser le nombre de fois défini, le texte ou l'image. |
| scrolldelay | Définit un délai (en millisecondes) entre deux apparitions du texte ou de l'image. La vitesse de défilement est inversement proportionelle à la valeur de scrolldelay. |
| scrollamount | Permet de paramétrer (en pixels) l'intervalle entre deux apparitions du texte ou de l'image. La vitesse de défilement est proportionelle à la valeur de scrollamount. |
| truespeed | L'attribut truespeed supprime l'arrondi utilisé dans le calcul de la vitesse. Le déplacement qui se fait à la valeur réelle de vitesse choisie, est plus rapide. |
Les exercices consistent à expérimenter dans la colonne de droite les différents attributs de l'élément <marquee> présentés dans la colonne de gauche.
Mode d'emploi : Ouvrir ce fichier avec Notepad et copier dans les cellules de la colonne droite du tableau, le code présenté dans les cellules
de gauche.
Commentaires et Codes |
ExemplesDans la version imprimable,
|
||
Comportement par défaut de la balise <marquee><marquee>Par défaut, la balise <marquee > fait défiler un texte ou une imagebr<br/> horizontalement, de droite à gauche en continu </marquee> <marquee> <img src="ImgMarquee/Cabaliros50.jpg"/><br/> Panorama des Pyrénées centrales depuis le Pic du Cabaliros </marquee> |
|||
Stylage de la balise <marquee> par ses attributs ou par le style CSS<marquee width="75%" height="60px" bgcolor="#ccffcc" vspace="30px" hspace="30px">On peut définir la largeur, la hauteur et la Couleur d'arrière-plan <br/> de la balise MARQUEE par ses attributs </marquee> <marquee style="background:url(ImgMarquee/Canigou.jpg); color:#B20;"> Mais il est préférable d'utiliser les css<br/> qui offrent plus de propriétés de mise en forme </marquee> |
|||
Les trois types de défilementL'attribut behavior qui définit le comportement du contenu de <marquee> peut adopter trois valeurs : scroll, slide et alternate.<marquee behavior="scroll" style="background:#bbb; height:60px"> Comportement scroll : texte en "défilement" </marquee> <marquee behavior="slide" style="background:#cfc;"> <img src="ImgMarquee/Cabaliros50.jpg"/><br/> Comportement slide : texte en "glissade" </marquee> <marquee behavior="alternate" style="background:#fcf;"> Comportment alternate :<br/> texte "va-et-vient" </marquee> |
|||
Le sens du défilement horizontalL'attribut direction permet de définir le sens du défilement horizontal de </marquee>, par les valeurs : right et left.<marquee behavior="scroll" direction="right" style="background:#fcf;"> Comportement scroll et déplacement vers la "droite" </marquee> <marquee behavior="slide" direction="left" style="background:#cfc;"> Comportement slide<br/> et déplacement<br/> vers la "gauche" </marquee> |
|||
Le sens du défilement verticalL'attribut direction permet également de définir le sens du défilement vertical de </marquee>, par les valeurs : up et down.<table> <tr> <td> <marquee style="height:450px; width:150px; padding:8px; background:#fcf; color:#f0f;" behavior="scroll" direction="up"> <img src="ImgMarquee/Vautour.png"/><br/> Comportement scroll et déplacement vers le haut </marquee> </td> <td> <marquee style="height:450px; width:80px; padding:8px; background:#cfc; color:#f00;" behavior="alternate" direction="down"> Comport-<br/>ement scroll et déplac-<br/>ement vers le bas </marquee> </td> </tr> </table> |
|
||
L'intervalle d'apparitionL'attribut scrollamount permet de définir l'intervalle entre deux apparitions du texte ou de l'image.<marquee scrollamount="1" style="background:#fcf;"> Je me déplace très lentement<br/> scrollamount="1" </marquee> <marquee scrollamount="10" style="background:#aaa;" > Je me déplace normalement<br/> scrollamount="10" </marquee> <marquee scrollamount="40" style="background:#cfc;"> Je me déplace très rapidement<br/> scrollamount="40" </marquee> |
|||
Le délai d'apparitionL'attribut scrolldelay permet de définir un délai entre deux apparitions du texte ou de l'image.<marquee scrolldelay="10" style="background:#fcf;"> Intervalle court entre les déplacements<br/> scrolldelay="10" </marquee> <marquee scrolldelay="150" style="background:#aaa;"> Intervalle moyen entre les déplacements<br/> scrolldelay="150" </marquee> <marquee scrolldelay="500" style="background:#cfc;"> Intervalle long entre les déplacements<br/> scrolldelay="500" </marquee> |
|||
La vitesse "Vraie"L'attribut truespeed supprime les arrondis de calculs et affiche la vitesse "Vraie".<marquee scrolldelay="10" style="background:#FFDDFF; margin-bottom:0"> Intervalle court entre les déplacements scrolldelay="10" </marquee> <marquee scrolldelay="10" truespeed style="background:#AA88AA"> scrolldelay="10" avec truespeed </marquee> <marquee scrolldelay="30" style="background:#cccccc; margin-bottom:0"> Intervalle moyen entre les déplacements scrolldelay="150" </marquee> <marquee scrolldelay="30" truespeed style="background:#888888"> scrolldelay="150" avec truespeed </marquee> <marquee scrolldelay="58" style="background:#ddffdd; margin-bottom:0"> Intervalle long entre les déplacements scrolldelay="500" </marquee> <marquee scrolldelay="58" truespeed style="background:#88aa88"> scrolldelay="58" avec truespeed </marquee> |
|||
La BoucleL'attribut loop permet de définir le nombre de déplacement du texte ou de l'image.<marquee behavior="scroll" loop="20" style="background:#fcf"> Le texte défilera vers la gauche 20 fois </marquee> <marquee behavior="slide" loop="25" style="background:#aaa"> Le texte glissera vers la gauche 25 fois </marquee> <marquee behavior="alternate" loop="30" style="background:#cfc"> Le texte ira en "va-et-vient" 30 fois </marquee> |
L'idée des exercices ci-dessus a été empruntée au site de Pierre van der Knaap et en est une adaptation.
Déplacement Gauche→Droite dans un élément <marquee>, d'une animation Flash Colibri2011.swf sur un arrière-plan ForetTropic.jpg . Attention avec IE, il faut cliquer en haut de page sur "Autoriser le contenu bloqué", pour débloquer Flash. Bien sûr on pourrait réaliser toute cette animation avec Flash, sans les tremblotements de l'image d'arrière-plan, mais il faut maîtriser Flash.