Comment faire défiler une image en HTML ?

 

par 6lvr |

     
Comment faire défiler une image en HTML ?

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.)

Ajouter un commentaire 

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.
Lire la suite des commentaires sur le forum

Sur le même thème

damneya

Comment ajouter des métadonnées sur iWeb ?

Pour attirer des visiteurs sur un site internet, il est important d’ajouter à son site des métadonnées et des mots-clés qui seront recherchés dans les moteurs de recherche. Pour ajouter des métadonnées sur iWeb sans éditer le code HTLM brut, pre

kat5

Comment utiliser le logiciel Dreamweaver ?

Dreamweaver est un logiciel permettant de concevoir un site Internet. Et comme tout logiciel, il est simple d'utilisation, mais certaines bases sont nécessaires. Alors à vos claviers, à votre souris, nous allons partir à la découverte de ce logiciel

damneya

Comment créer un blog ?

Un blog ou plus exactement un weblog est un site personnel que vous pouvez créer pour vous exprimer sur vos points de vues. Quelles étapes faut-il suivre pour créer un bon blog?

Chercher un article sur Comment fait-on