A lire aussi
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 ?
Étapes de réalisation
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.
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 !
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>
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>
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é.
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>
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
volcan | 04/11/2012
6lvr | 20/07/2012
badboyskely | 20/07/2012
6lvr | 04/02/2011
Sur le même thème
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
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
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
Articles sur le même sujet
Derniers articles Création & gestion d’un site internet