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

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



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.



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