Suivre ce blog
Editer l'article Administration Créer mon blog
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

z.m 01/11/2014 22:55

Bonsoir,

L'image elle fait combien de pixel?

Cordialement
Z.M

dams 04/10/2014 09:11

Bonjour, le code horizontal me met les image les une sous les autre aulieu d etre a cote

dupont 20/01/2014 14:17


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

Aurelie 29/01/2014 10:22



peut être un probleme de taille de photo ??



Loïc 09/11/2013 07:50


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 ?


 

Aurelie 12/11/2013 16:10



non, désolée



Marev 06/02/2013 08:11


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

linda 18/01/2013 22:10


Merci beaucoup pour tes précieux conseils !

19/07/2012 16:29


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é

Aurelie 27/07/2012 13:45



Le permier correspond à un espace et le second à un retour chariot. Ils peuvent s'écrirent autrement mais là, c'est du html ; il y a aussi du Xhtml, legerement diiférent, mais compatible.



Cindy 12/06/2012 17:27


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!

Aurelie 18/06/2012 17:39



a priori non, pas avec cette méthode.



Mamanlullaby 09/05/2012 19:01


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)


 

Aurelie 10/05/2012 08:45



Non, pas avec ce code...



L. C. S. Photos 22/03/2012 19:53


Bonsoir Aurélie,


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


Bonne soirée à bientôt

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