4 mai 2014 7 04 /05 /mai /2014 10:48




Logo de Faire un Blog
 


 
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()">&nbsp;<img height="180" width="200" src="http://idata.over-blog.com/2/07/78/33/Mes-photos/Mes-photos_1036_800x600.jpg" />
<br /><img height="180" width="200" src="
http://idata.over-blog.com/2/07/78/33/Mes-photos/Mes-photos_0158_800x600.jpg" /><br /><br/><img height="180" width="200" src="http://idata.over-blog.com/2/07/78/33/ToucheMonblogcarre.jpg" />
</marquee></p>

 

 




 


 

                                      Rendez-vous sur Hellocoton !                                                   

 

 

Partager cet article

Published by Aurelie - dans Les images
commenter cet article

commentaires

Dany 15/05/2011



Bonjour, je souhaite faire un défilement de photos, mais n'ai pas encore réussi, malgré toutes tes infos. De plus  ma question était : y a t'il un nombre maximal de photos que l'on peut
rentrer dans Over Blog ?


Si oui, peut on en rentrer grâce à KIZOA auquel je me suis inscrite mais que je ne gère pas du tout.. j'ai composé des albums que je n'arrive pas à faire entrer dans mon blog.


SOS d'une blogueuse un peu maladroite.


Merci d'avance.


 



Gibfen2 27/12/2011


Bonjour,


Pouvez vous m'aider, je voudrais mettre ce type de carte dans mon blog.





ça fonctionne
très bien qu'en j'écris mon texte. mais aussitôt mis en ligne plus rien.


Merci
d'avance.

L. C. S. Photos 22/03/2012


Bonsoir Aurélie,


Merci pour cette article, nous allons bidouiller un peu en suivant tes conseils


Bonne soirée à bientôt

Mamanlullaby 09/05/2012


Merci beaucoup pour tout ce partage et ces explications !!!


Petite question tout-de-même : Est-il possible que le diaporama me commence pas toujours par la même image mais commence aléatoirement par une image ? (de sorte que les visiteurs ne voient pas
toujours les mêmes images si elles sont nombreuses)


 

Cindy 12/06/2012


Bonjour,


 


Merci beaucoup pour ces infos, je fais le site pro de ma société et je n'arrivais pas a intégrer un bandeau de défilement (avec les infos flash on s'y perd vite).


Juste une question: est-il possible de faire en sorte que les images défilent en boucle (sans "blanc" à la fin de ruban avant qu"il ne recommence) ???


Merci pour ton aide: simple, clair, efficace!

19/07/2012


Bonjour,


Encore une fois intéressant, cet article, illustré avec le résultat...


Mais je me pose une question : pourquoi   ?  et le , c'est pour les espaces entres les photos ?  il me semblait avoir lu qu'ils  pouvaient s'écrire un peu
différemment ( peut être dans une version html plus récente ?


Encore bravo pour l'initiative de ces espaces plein de générosité

linda 18/01/2013


Merci beaucoup pour tes précieux conseils !

Marev 06/02/2013


merci pour toutes vos astuces, elles sont vraiment simples à utiliser et pratiques!

Loïc 09/11/2013


Bonjour,


Meric pour votre astuce de diaporama simplissime ! Je commence juste mon premier blog et je me suis arraché les cheveux pour trouver ça. J'aurais une question encore, est-ce possible de rajouter
un code pour que les diaporama affiche les images des derniers articles ?


 

dupont 20/01/2014


Bonjour


merci pour les codes, moi je voludrais faire un défilement horizontal de plusieurs photos, mais quand je mets les liens, ça défile bien horizontal mais les photos sont superposées (je ne sais pas
comment expliquer!) et ne se suivent pas !


que faire ? 


merci

Présentation

  • : Faire un blog
  • Faire un blog
  • : Ce blog vous aide à vous lancer pour faire votre blog : plateforme, mise en page, décoration, gadgets...
  • Contact

Vous Cherchez Quoi ?

Bienvenue !

 

PancarteSmiliz.pngCe blog a pour objet de vous aider à faire votre blog. C'est facile, et possible sans être informaticien !

J'ai 2 autres blogs très différents, et je souhaite mettre mon expérience à votre service. N'hésitez pas à me déposer vos commentaires et questioxxns. 
Si vous débutez, commencez par l' Index des articles , rubrique "Pour bien démarrer". 

 

Inscrivez votre site sur ma Top Liste et améliorez votre référencement.  

Mon logo sur votre site

Si j'ai contribué à l'amélioration de votre blog, merci d'y mettre mon logo :
Site Faire Un Blog

Code à coller :

<a href="http://faireunblog.over-blog.com/" target="_blank"><img height="65" width="85" src="http://sd-1.archive-host.com/membres/up/42016049459753927/PancarteSmiliz.png" alt="Site Faire Un Blog" /></a>

 

 

Date du jour

 

 

 

Géolocalisation

formation
Partager cette page Facebook Twitter Google+ Pinterest
Suivre ce blog