Suite à un commentire posté il y a quelques jours, voici aujourd’hui les explications concernant la réalisation d’un diaporama d’images défilantes.
Paramétrage du diaporama
La première ligne seulement.
<center><marquee behavior= »scroll »  direction= »left » height= »200″
width= »450″ scrollamount= »1″ scrolldelay= »30″ truespeed= »true »>
center : c’est l’alignement du diaporama. Center lui permet d’être centré dans la page ou le module.
(left permet de le serrer à gauche, right permet de le serrer à droite).
scrollamount= »1″ : c’est la vitesse de défilement des images du diaporama.
Plus le chiffre est élevé plus les images vont vite.
width= »450″ : c’est la largeur totale en pixels du diaporama. (il est possible de l’indiquer en %)
height= »200″ : c’est la hauteur totale en pixels du diaporama.
direction= »left » : c’est la direction de défilement des images du diaporama.
Il est possible d’indiquer right : droite  -  left : gauche  -  up : haut  -  down : bas
Paramétrage des images :
<a href= »http://lien-de-l-image.html« >
<img height= »106 » width= »80 » src= »http://url-de-l-image.jpg » alt= »Titre de l’image » border= »0″ />
</a>
a href= »http://lien-de-l-image.html » : chaque image peut avoir un lien différent qui pointe vers une page.
Il suffit d’indiquer l’url.
Si vous souhaitez l’enlever, il faut supprimer cette ligne et supprimer la fin de balise </a>
height= »106″ : c’est la hauteur en pixels de l’image
width= »80″ : c’est la largeur en pixels de l’image
src= »http://url-de-l-image.jpg » : c’est l’url de l’image (il faut que l’image soit déjà hébergée sur le net)
alt= »Titre de l’image » : c’est pour donner un titre à l’image. Cette info sera visible au survol de l’image par la souris.
border= »0″ : permet d’avoir ou non une bordure. Personnellement je préfère sans.
Les espaces dans le diaporama :
C’est ainsi qu’on évite que les images se collent.
Lors d’un défilement horizontal, les espaces s’indiquent ainsi    &nbsp;
Lors d’un défilement verticale, les espaces s’indiquent ainsi     <br>
Le code : défilement vertical
<center>
<marquee behavior="scroll"  direction="up" height="400"
width="150" scrollamount="1" scrolldelay="30" truespeed="true">
<a href="http://lien-de-l-image.html">
<img height="106" width="80" src="http://url-de-l-image.jpg"
alt="Titre de l'image" border="0" />
</a>
<a href="http://lien-de-l-image.html">
<img height="106" width="80" src="http://url-de-l-image.jpg"
alt="Titre de l'image" border="0" />
</a>
<a href="http://lien-de-l-image.html">
<img height="106" width="80" src="http://url-de-l-image.jpg"
alt="Titre de l'image" border="0" />
</a>
<a href="http://lien-de-l-image.html">
<img height="106" width="80" src="http://url-de-l-image.jpg"
alt="Titre de l'image" border="0" />
</a>
<a href="http://lien-de-l-image.html">
<img height="106" width="80" src="http://url-de-l-image.jpg"
alt="Titre de l'image" border="0" />
</a>
<a href="http://lien-de-l-image.html">
<img height="106" width="80" src="http://url-de-l-image.jpg"
alt="Titre de l'image" border="0" />
</a>
</marquee>
</center>
ASTUCE : pour wordpress, il est nécessaire d’insérer le code avec l’éditeur html et de ne pas revenir sur l’éditeur visuel… sinon, ça ne marche pas !
 



Créer un site
Créer un site