Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
16 février 2014 7 16 /02 /février /2014 18:12
Apprendre
à faire
une liste défilante
qui s'arrete
au survol de la souris
Lisez cet article !



1. Faire une liste défilante verticale

Les listes défilantes sont utiles si on souhaite afficher un grand nombre d'éléments d'une même rubrique, sans pour cela prendre trop de place à l'écran.

La liste défilante a aussi l'avantage d'être mobile, et donc d'attirer l'oeil du visiteur !



2. code HTML

2.1 Balise MARQUEE

Le principe du défilement se fait avec la balise MARQUEE, dont on a déjà parlé.
Revoir les informations complètes sur la balise de défilement MARQUEE ICI.

Il faut absolument lui donner un sens de défilement vertical, avec l'information de direction "UP".
Le code minimum à insérer est donc :

<marquee behavior="scroll" direction="up"
.....
</marquee>


2.2 Arrêter le défilement au survol de la souris

Pour faciliter la lecture de la liste, il est fortement conseillé d'offrir la possibilité d'arrêter son défilement, quand la souris de votre visiteur passe par dessus.

Pour cela, ajouter à votre code :

onmouseover="this.stop()"
onmouseout="this.start()"



2.3 Les éléments de la liste

A la fin de chaque élément, on ajoutera <br /> pour demander un retour à la ligne (sauf pour le dernier).

Les élements de votre liste seront donc à inscrire ainsi :

Element 1<br/>
Elément 2<br/>
Elément 3<br/>
...
Dernier élément



2.4 La taille d'affichage de la liste

Height définit la hauteur de votre liste, et Width sa largeur.

Il est conseillé de définir une largeur suffisante pour que chaque élément puisse être affiché en entier dans sa largeur !


2.5 La vitesse de défilement

Vous connaissez déjà cette information si vous avez lu l'article sur les balises MARQUEE, il s'agit de  scrollamount et scrolldelay

2.6 Synthèse

Le code complet à copier en édition avancé dans votre article ou votre module est :

<marquee behavior="scroll" direction="up" height="200" width="400" scrollamount="1" scrolldelay="1"
onmouseover="this.stop()" onmouseout="this.start()"

<p>

Element 1 de la liste<br />
Element 2 de la liste<br />
Element 3 de la liste<br />
Element 4 de la liste
<br />
..............................<br />
</p>
</marquee>

où vous remplacez les éléments de la liste par les vôtres. 

3 Exemple complet d'une liste vertical défilante

3.1 La liste défilante

 

 
Les compteurs de visites
Image changeante au survol de la souris
Mon blog passe à la télévision !
Connaître l'adresse URL de ses documents
Enregistrer vos images pour votre blog
Mettre une photo en fond d'article (ou de module)
Tout comprendre sur le flux RSS
Votre site en page de démarrage
les 5 règles d'Or pour construire votre site web
Mettre une horloge sur votre blog


3.2 Le code complet de cette liste défilante :


<marquee scrolldelay="1" scrollamount="3" width="400" height="200" direction="up" onmouseout="this.start()" onmouseover="this.stop()"><span style="font-family: comic sans ms,sans-serif;"><span style="font-size: 10pt;">Les compteurs de visites<br />Image changeante au survol de la souris<br />Mon blog passe &agrave; la t&eacute;l&eacute;vision !<br />Conna&icirc;tre l'adresse URL de ses documents<br />Enregistrer vos images pour votre blog<br />Mettre une photo en fond d'article (ou de module)<br />Tout comprendre sur le flux RSS<br />Votre site en page de d&eacute;marrage<br />les 5 r&egrave;gles d'Or pour construire votre site web<br />Mettre une horloge sur votre blog</span></span></marquee>



 

                                        Rendez-vous sur Hellocoton !

 

Partager cet article

Repost 0
Published by Aurelie - dans Les textes
commenter cet article

commentaires

bfrance 17/05/2011 07:44



Ça semble être facile à faire cette liste défilante, je vais l'essayer. Par contre j'ai peur que si j'ajoute de plus en plus de gadgets sur mon blog que ça
ralentisse l'ouverture des pages.  Lorsque je viens ici je m'amuse à découvrir tous tes gadgets et tes conseils, mais il est de plus en plus difficile pour moi d'y venir, la page gèle et
c'est long à ouvrir snif.


France



Aurelie 17/05/2011 10:11



Oui, c'est vrai, ça alourdit. Il faut donc choisir les préférés !



tiot 14/04/2011 23:18



salut


va falloir que j'en fasse une pour mes liens


bonne soirée



Swann 18/04/2010 05:20



yeahhh ça c'est carrément bon à savoir,merci beaucoup !!


et merci d'être passée du côté de chez moi :)


Bon dimanche !!



Eliane 09/04/2010 10:24



Bonjour,


merci !
**       **       **      
**       **       **
Ce matin au levé, un ciel dégagé
une luminosité a nettoyé les vitres !

Une petite marche programmée
et du vélo pour les enfants
Le soleil est la, mais il ne chauffe pas

Belle journée           A bientot Parfums de
Campagne    €lian€



Krio 09/04/2010 09:13



un petit coucou en ce vendredi ! bonne journée !$



Belbe 08/04/2010 22:27



intéressant je découvre ... je vais revenir ..


je clic de soutien .. aussi ....


Bien à toi !



Veronique Brosseau 08/04/2010 21:55



merci pour ton passage, des trucs intéressants ici !$$$



Aurelie 08/04/2010 22:04



N'hésite pas à revenir ! Bises



christelle 08/04/2010 21:51



bonsoir, moi qui aime les ascenceurs..; je vais pouvoir encore bien "m'amuser"..; encore merci de tes articles qui mettent en valeur nos blogs.. bravo !!!



sullilaeti 08/04/2010 21:39



Salut, je voudrais de l'aide pour faire un sondage dans la mis en page de mon site, dans texte libre, je voudrais faire un sondage, j'ai essayer avec pixule mais le format est trop grand et quand
j'essai de le diminuer manuellement sa ne fonctionne pas, peut tu me donner un autre site qui pourrais marché, il me faudrais un format environ 180 pixel.


J'ai essayer avec d'autre site mais quand je copie le code html, over blog me di qu'il y a un truc qui n'est pas compatible, je me souvien plus du non je c'est que sa commence par "ja", c'est un
drole de nom.


Aide moi STP



Aurelie 08/04/2010 22:09



Pixule est vraiment le site top pour les sondages. tu peux modifier la taille en allant dans le code : width et height, valeurs à changer



Steve 08/04/2010 14:34



Cliiiiiiiiiic quotidien, pas grand chose à dire a part que...


C'EST LES VACANCES !!!


Bonne journée, Steve



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