1. Mettre une image gif volante
Maintenant que vous connaissez la balise "marquee" - Sinon, pour la révision c'est ici Le défilement
avec la balise Marquee - je vous propose de l'utiliser pour y mettre une image volante dans un article, ou un module.
2. Choisir l'image qui va voler
Vous devez d'abord choisir l'image que vous voulez utiliser, puis noter son adresse.
Il est plus logique de choisir une image que l'on s'attend à voir voler, comme un insecte ou ce très joli papillon, mais si vous voulez un effet décalé qui surprendra vos visiteurs, vous pouvez
au contraire choisir tout autre chose.
3. Faire voler son image
3.1 Code HTML à insérer dans l'article ou le module
<marquee behavior="alternate" direction="up" width="80%"><marquee
direction="right" style="width: 650px; height: 88px;" behavior="alternate"><img src="url votre
image"></marquee></marquee>
et vous remplacez "url de votre image par l'adresse de votre image.
3.2 Le paramétrage
width est la largeur de déplacement occupée par le déplacement de votre image. 80% correspond à 80% de la largeur de l'article ou
du module où vous le mettez. Si vous voulez qu'il couvre tout, mettre 100 %.
Vous réglez à la fois le déplacement en largeur (le width dans la balise avec le behavior right) et en hauteur (le height)
3.3 Ajustements
Si vous cliquez juste à côté de votre objet volant (en mode édition), vous voyez apparaître un rectangle symbolisé par 6 petites marques : aux angles et au milieu de la longueur.
Ce rectangle correspond à la surface de déplament de votre objet. Vous pouvez la régler en déplaçant ces pettis marques.
3.4 Le code complet du papillon qui vole
<marquee width="90%" behavior="alternate" direction="up" style="width: 100%;
height: 100px;"><marquee behavior="alternate" direction="right" style="width: 651px; height: 88px;"><img height="60" width="80" src="http://www.gif-anime.org/im/gif/animal/papillon/papillon8.gif" class="CtreTexte" /></marquee></marquee>
![]() |
![]() ![]() |
![]() |