Profil

  • Christelle
  • retrouvez-moi sur : http://www.awerpi.fr
  • retrouvez-moi sur : http://www.awerpi.fr

Photo.Graph

Catégories

16 juillet 2009 4 16 /07 /juillet /2009 08:22
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.

Voici un exemple :


Le calme avant...   surface   Inséparables   Comme le temps   Pieuse   Brodeuse   Penseur

Il est possible de le faire aller dans 4 direction : vers la droite, vers la gauche, vers le bas, vers le haut, de définir à quelle vitesse les images peuvent défiler.



Pour l'installer, il suffit de coller le code à l'endroit désiré dans votre article ou votre module en passant par le mode html.




Il est totalement paramétrable !





Le code : défilement horizontal

<center><marquee scrollamount="4" width="500" height="106" direction="right">
<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> &nbsp;
<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> &nh
<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> &nbsp;
<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> &nbsp;
<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> &nbsp;
<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>





Paramétrage du diaporama :




La première ligne seulement.
<center><marquee scrollamount="4" width="500" height="106" direction="right">

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="4" : c'est la vitesse de défilement des images du diaporama. 
Plus le chiffre est élevé plus les images vont vite.

width="500" : c'est la largeur totale en pixels du diaporama.
height="106" : c'est la hauteur totale en pixels du diaporama.

direction="right" : 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> &nbsp;

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 vertiacle, les espaces s'indiquent ainsi     <br>






Autre exemple : défilement vertical
Le calme avant...

surface

Inséparables

Comme le temps

Pieuse

Brodeuse

Penseur



Le code : défilement vertical

<center><marquee scrollamount="8" width="106" height="500" direction="up">
<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><br><br>
<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><br><br>
<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><br><br>
<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><br><br>
<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><br><br>
<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><br><br>
<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>


Télécharger le code en format .txt ici


Partager cet article

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article

commentaires

jerome 12/02/2010 20:10


wow !! rapide

Merci, mais bon...comprends pas, ça marche po !! http://frogisback.blogspot.com/


Christelle Vinsonneau 13/02/2010 12:12



arrgghg! tu vas sur Over-Blog ????


Méfie toi : pas de sauvegarde possible, pub imposée en cas d'inactivité, barre imposée (quoi d'autres plus tard?), actionnaire : TF1, staff non disponible...


Bon, malgré tout, sur le lien ob qu tu laisses sur ton blogspot le défilement fonctionne (tu devrais indiquer un height qui convient pour l'affichage des photos en entier).


Tu ne peux plus répondre sur ce blog, j'ai désactivé les commentaires car je vais sur http://www.awerpi.fr car over-blog me pousse à fuir leurs pratiques abusivent.


 



jerome 12/02/2010 19:40


Bonjour,

Bravo et merci pour ces infos super précieuses!

J'ai un petit souci : le défilement vertical fonctionne ( même si le border="0" ne donne rien) mais en horizontale mes photos défilent bien en horizontal mais elles sont superposées...
Merci de votre aide et désolé pour ma grande ignorance.


Christelle Vinsonneau 12/02/2010 19:46


ajoute des   pour faire des espaces. Il y en a un déjà à chaque fin de ligne de code, mets-en d'autres jusqu'à ce que tu obtiennes l'espacement désiré.


Jean-Michel 28/01/2010 17:02


Bonjour, et 'il possible en survolant l'image, que le scripte s'arrête, et reparte en retirant le pointeur de la souris, ou un temps de pose entre les images. Merci pour votre travaille.


Christelle Vinsonneau 31/01/2010 12:15


sans javascript, ce n'est pas possible.


Gilles 20/11/2009 21:43


Bonjour,
un immense merci pour cette superbe contribution pour le béotien que je suis !
J'ai fait en essai de diaporama, et tout marche parfaitement. Mais est-il possible de le mettre en boucle de sorte qu'à la fin il n'y ait pas à attendre qu'il recommence ?
Merci encore ...


Christelle Vinsonneau 25/11/2009 15:54


sans javascript ce n'est pas possible...


Evelyne 03/11/2009 09:00


Merci pour toutes vos explications ..
J'ai le même problème que Katleen... j'ai mis 59 images en défilement mais moi je n'en vois que 3 défiler alors que certains les voient toutes..
Je pense qu'il s'agit d'un problème de naviguateur.. je suis sur Internet exploreur 8 .. Je pense qu'avec Firefox c'est mieux...
J'ai aussi un problème de défilement saccadé ...
Bonne journée


Christelle Vinsonneau 25/11/2009 15:32


C'est saccadé parce que les photos sont un peu lourdes... ta première photo fait plus de 28000 octets, c'est beaucoup ! Diminue-les et ça devarit aller mieux et certainement régler le
problème sur les autres navigateurs.