Overblog
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

Annie 21/04/2016 15:33

J'ai bien réussi a faire défiler mes images mais lorsque je suis sur un autre ordinateur on ne les voit pas il faut les enregistrer quelque part ?? Merci

couly 21/04/2016 14:00

Quand je me sers de marquee et du menu pour faire defiler des images les unes apres les autres ( 2 images). au lieu de les avoir l'une apres l'autre les photos defilent l'une au dessus de l'autre .....

mo 03/11/2015 09:56

Merci très bon article

Emsi 09/07/2015 08:51

Excusez-moi pour le commentaire un peu plus bas : je me suis trompée de site ! En revanche, je profite de mon re-passage par là pour dire qu'avec le code "marquee" les images défilent par "à coups" et ça manque donc de fluidité.
Donc finalement, j'ai opté pour des gifs animés :ultra simple (avec PhotoScape ou autre, même moi qui suis une nullité je peux le faire !). Le résultat est le même (des images qui défilent) mais en nettement plus doux doux et fluide.
Bien cordialement, et encore mes excuses pour mon erreur de destination, si ça vous a fait chercher la fameuse "Françoise" (qui donc n'est pas chez vous) ;-)

film streaming 28/04/2015 12:27

Bonjour ,
je voulais intégrer un défilement d'images sans voir l espace vierge quand il se termine le défilement.
Merci

Emsi 06/03/2015 10:11

Bonjour ! quel merveilleux tuyau tu nous donnes ! Mon blog est en préparation donc je n'en donne pas encore l'adresse.
J'aurais besoin d'un complément d'information :
je vois bien l'option html quand je suis en rédaction avancée d'article ou du texte de ma page d'accueil, mais ce que je voudrais, c'est utiliser ton système pour faire défiler mes photos en bannière.
Une internaute dit avoir utilisé ton tuyau pour le faire, et le résultat me conviendrait, en attendant de le peaufiner.
Voici le lien de la discussion. La personne s'appelle "françoise". En cliquant sur le lien qu'elle donne vers son site, tu peux voir ton principe adapté à la bannière.
Où placer le code htmo dans ce cas ?
http://aide.blog4ever.com/forum/annae-2010/bandeau-defilant-avec-images
Un grand merci
Emsi

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



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