Le défilement d'image

Pour faire défiler des images, la méthode est similaire à celle utilisée pour faire défiler du texte, on utilise une balise MARQUEE. Je vous recommande donc de lire cet article avant d'aller plus loin.

-

-

Pour un défilement basique de deux photos ca donnerait cela en CSS

-

<MARQUEE>
<IMG src="http://idata.over-blog.com...">
<IMG src="http://idata.over-blog.com...">
</MARQUEE>

Où http://idata.over-blog.com... est le chemin URL de la photo à afficher.

-

-

-

La même chose avec 5 photos :

-

<MARQUEE>
<IMG src="http://idata.over-blog.com...">
<IMG src="http://idata.over-blog.com...">
<IMG src="http://idata.over-blog.com...">
<IMG src="http://idata.over-blog.com...">
<IMG src="http://idata.over-blog.com...">
</MARQUEE>

-

-

-

Maintenant on peut règler la vitesse de défilement avec la paramètre SCROLLDELAY.

-

<MARQUEE scrollDelay=110>
<IMG src="http://idata.over-blog.com...">
<IMG src="http://idata.over-blog.com...">
<IMG src="http://idata.over-blog.com...">
<IMG src="http://idata.over-blog.com...">
<IMG src="http://idata.over-blog.com...">
</MARQUEE>

-

-

-

Maintenant on va réduire la fenêtre d'affichage des photos et réduire la taille des photos avec la commande STYLE en jouant sur les paramètres WIDTH et HEIGHT.

-

<MARQUEE style="WIDTH: 470px; HEIGHT: 225px" scrollDelay=110>
<IMG style="WIDTH: 313px; HEIGHT: 215px" src="http://idata.over-blog...">
<IMG style="WIDTH: 313px; HEIGHT: 215px" src="http://idata.over-blog...">
<IMG style="WIDTH: 313px; HEIGHT: 215px" src="http://idata.over-blog...">
<IMG style="WIDTH: 313px; HEIGHT: 215px" src="http://idata.over-blog...">
<IMG style="WIDTH: 313px; HEIGHT: 215px" src="http://idata.over-blog...">
</MARQUEE>

-

 -

-

Et pour finir on va faire arrêter la photo au survol de la souris.

-

<MARQUEE onmouseover="this.stop();" onmouseout="this.start();" style="WIDTH: 470px; HEIGHT: 225px" scrollDelay=110>
<IMG style="WIDTH: 313px; HEIGHT: 215px" src="http://idata.over-blog...">
<IMG style="WIDTH: 313px; HEIGHT: 215px" src="http://idata.over-blog...">
<IMG style="WIDTH: 313px; HEIGHT: 215px" src="http://idata.over-blog...">
<IMG style="WIDTH: 313px; HEIGHT: 215px" src="http://idata.over-blog...">
<IMG style="WIDTH: 313px; HEIGHT: 215px" src="http://idata.over-blog...">
</MARQUEE>

- 

-

-

Et voila, bon défilement.

____________________

Retour au sommaire.

Pour accéder aux rubriques de nos articles, cliquez ici, pour le livre d'or c'est là.