Contact
1. Réalisez facilement un petit diaporama défilant avec vos photos
Ce diaporama consiste à faire défiler vos photos, comme en haut de cet article.
2. Comment faire défiler vos images
2.1 Balise HTML
La balise à utiliser est la balise "MARQUEE", la même que pour faire défiler vos textes.
2.2 Le code complet
Il suffit d'aller en édition avancée dans votre article, de passer en langage HTML, et d'inscrire le code suivant :
<MARQUEE scrollamount="4">
<IMG src="adresse de votre image1">
<IMG src="adresse de votre image2">
<IMG src="adresse de votre image3">
<IMG src="adresse de votre image....">
</MARQUEE>
en remplaçant "adresse de votre image" par vos adresses.
Scrollamount est la vitesse de défilement. Plus le chiffre est élevé, plus la vitesse l'est.
2.3 Les éventuelless informations à ajouter
Il est souvent nécessaire de modifier la taille de vos images afin qu'elles ne soient pas trop grandes.
Pour cela, ajouter
height="xx" width="xx"
juste après IMG pour chacune d'elles.
2.4 Les paramètres optionnels de défilement
|
Paramètre balise MARQUEE |
Action |
possibilités |
| Behavior | Indique le type de défilement : | Scroll : mode par défaut Alternate : alterné |
| Direction | Indique la direction du défilement | Left : gauche à droite Right : droite à gauche Down : Bas Up : Haut Vous pouvez définir la plage si vous utilisez Up et Down en ajoutant height="x" en nbre de pixels |
| OnmouseOut | A utiliser avec celui du dessous, afin d'arrêter le défilement au survol de la souris, puis le reprendre. |
Indiquer "this.start();" |
| OnMouseOver | Indiquer "this.stop();" |
3. Code complet du défilement d'images ci-dessous
Défilement vertical, avec arrêt quand la souris passe au dessus.
<marquee scrollamount="5" direction="up" onmouseover="this.stop()" onmouseout="this.start()"> <img height="180" width="200" src="https://idata.over-blog.com/2/07/78/33/Mes-photos/Mes-photos_1036_800x600.jpg" />
<br /><img height="180" width="200" src="https://idata.over-blog.com/2/07/78/33/Mes-photos/Mes-photos_0158_800x600.jpg" /><br /><br/><img height="180" width="200" src="https://idata.over-blog.com/2/07/78/33/ToucheMonblogcarre.jpg" />
</marquee></p>