Comment faire défiler une image en HTML ?

par 6lvr |

Vous venez de conclure la mise en page de votre dernier article, et vous trouvez qu'il manque d'animation ? Sachez qu'il est possible en HTML de faire bouger une image par défilement, horizontalement ou verticalement...

Quelles sont les fournitures nécessaires ?

* éditeur HTML
* bloc-notes

Étapes de réalisation

1.

La première mission consiste à héberger votre image, soit sur un serveur ftp d'un de vos sites personnels, soit sur un site dédié à l'hébergement de documents.

2.

Ensuite, comme toute fonction HTML, celle-ci nécessite l'emploi d'une balise:
<marquee> ... </marquee>

par exemple, saisissez ce qui suit dans votre page HTML:
<marquee><img src="[URL de l'image]"></marquee>

ainsi votre photo navigue-t-elle sur votre page !

3.

Cette balise 'marquee' accepte divers compléments d'informations.

La direction, avec 4 valeurs possibles: left, right, up, down

par exemple, saisissez ce qui suit dans votre page HTML:
<marquee direction="up"><img src="[URL de l'image]"></marquee>

4.

Le glissement, avec 3 valeurs possibles:
normal (arrivé en bout de page, l'image redémarre depuis l'opposé)
slide (l'image s'arrête en bout de page)
alternate (l'image repart en sens inverse quand elle arrive en bout de page)

par exemple, saisissez ce qui suit dans votre page HTML:
<marquee behavior="alternate"><img src="[URL de l'image]"></marquee>

5.

Pour rendre le déplacement plus ou moins fluide, on utilise le complément 'scrollamount', qui détermine le nombre de pixels parcourus lors du déplacement, entre 2 affichages de l'image:

par exemple, saisissez ce qui suit dans votre page HTML:
<marquee scrollamount="10"><img src="[URL de l'image]"></marquee>

changez la valeur et vous modifierez la fluidité.

6.

Vous pouvez délimiter la zone de défilement de votre photo grâce aux compléments 'width' et 'height'

par exemple, saisissez ce qui suit dans votre page HTML:
<marquee width="300" height="50"><img src="[URL de l'image]"></marquee>

7.

Enfin, le défilement peut être suspendu au survol de l'image par la souris.

par exemple, saisissez ce qui suit dans votre page HTML:
<marquee onmouseover="this.stop();" onmouseout="this.start();"><img src="[URL de l'image]"></marquee>

Astuces et mises en garde

Astuce(s) :

Il est bien évidemment possible de cumuler plusieurs variantes dans une même balise 'marquee' (taille, couleur, direction,etc.)

Commentaires

6lvr | 05/11/2012

bien sûr! en y mettant une balise IMG autour de l'image

volcan | 04/11/2012

bonjour, peu ton rendre cette image cliquable avec un lien de redirection ? merci

6lvr | 20/07/2012

vous collez plusieurs fois le code img src="[URL de l'image]" à la suite (1 par image à mettre)

badboyskely | 20/07/2012

Et qu'est ce qu'on fait si on veut défiler plusieurs images?

6lvr | 04/02/2011

ça va être compliqué de programmer ça en html. la balise marquee ne sera pas adaptée. il faudra vraisemblablement passer par un script en flash, donc totalement différent du html.

cascroute13 | 03/02/2011

Je vous met tout mon problème : je cherche a faire : Un mini jeu qui se jouerait uniquement avec la souris , j'ai pensé a un jeu ( pour commencer ) qui serait une balle qui rebondit et bouge , et on a 1 min. pour cliquer le plus de fois sur la balle, en bref le but est de cliquer le plus de fois sur la balle. donc je voudrait que la balle rebondisse et bouge aléatoirement et rapidement

6lvr | 03/02/2011

la balise 'marquee' permet SOIT un défilement horizontal, SOIT un défilement vertical, mais ne peut pas cumuler les 2. Pour cela, vous devrez créer un fichier gif animé en programmant vous-même les notions du défilement. si vous avez besoin d'aide, revenez me voir! bon courage

cascroute13 | 02/02/2011

Comment faire pour que la balle aille aléatoirement verticalement et aléatoirement horizontalement ? Merci !

Ajouter un commentaire