Afficher une image volante dans votre article

---

 
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>

---

* 5 articles a lire pour demarrer votre blog * Initiation au langage HTML * Tout pour modifier et embellir vos textes * Tout savoir sur les images  * Des gadgets * Votre blog ne ressemblera pas aux autres * Mes astuces * Référencements et indexations * Index des articles

Comments

[maeldune]

Même si je ne laisse pas souvent des messages.....


je suis les articles du blog, toujours intéressants....merci!


et passe souhaiter d'excellentes fêtes de fin d'année,


ainsi que longue vie au blog....

[Aurelie]

Merci à toi de ta fidélité ! Bonnes fetes

[JOELLE]

Bonsoir


Le papillon qui vole partout ça fonctionne MAIS il volète avec son petit carré blanc sur mon fond bleu/vert et c'est pas top! Comment fait-on pour gommer le tour blanc du papillon ????

[Aurelie]

Il faut alors retoucher l'image pour lui apporter un fond transparent. Tu peux faire ça ici : http://reduction-image.com/gif-anime/index.php

[Fantaisie]

Bonne journée

[Dany]

j'aime bien cette astuce,on peut faire de belles choses, mais faire attention, quand l'objet arrive au bord de l'écran il tombe sur le clavier ;=)) hihi, bon d'accord j'arrête la moquette!
$$$,bonne journée

[Bérengère KLIBER]

petit coucou du j€udi


bi$$$ amical€€€

[Krio]

un passage pour te dire bonjour ! et un clic $$

[ema2100 , et son Site/Blog sur l'actu.music,web,..]

Salut,


Merci pour la réponse


Bonne journée.


ema2100

[itachi]

hello!!


passage du jeudi, pluvieux chez nous!


bonne journé€


bi$e$!


 

[Cec]

bonne soirée

[Bidouillette/Tibilisfil]

Petite souris ordi, j'adore aussi, çà change ici! Cà va faire lourd si ej mets tout sur mon blog, mais j'apprécie !!!! Clicou et bonne soirée!!!!