Overblog
Editer l'article Suivre ce blog 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
Repost0

commentaires

B
<br /> <br /> Ç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<br /> 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<br /> c'est long à ouvrir snif.<br /> <br /> <br /> France<br /> <br /> <br /> <br />
Répondre
A
<br /> <br /> Oui, c'est vrai, ça alourdit. Il faut donc choisir les préférés !<br /> <br /> <br /> <br />
T
<br /> <br /> salut<br /> <br /> <br /> va falloir que j'en fasse une pour mes liens<br /> <br /> <br /> bonne soirée<br /> <br /> <br /> <br />
Répondre
S
<br /> <br /> yeahhh ça c'est carrément bon à savoir,merci beaucoup !!<br /> <br /> <br /> et merci d'être passée du côté de chez moi :)<br /> <br /> <br /> Bon dimanche !!<br /> <br /> <br /> <br />
Répondre
E
<br /> <br /> Bonjour,<br /> <br /> <br /> merci !<br /> **       **       **      <br /> **       **       **<br /> Ce matin au levé, un ciel dégagé<br /> une luminosité a nettoyé les vitres !<br /> <br /> Une petite marche programmée<br /> et du vélo pour les enfants<br /> Le soleil est la, mais il ne chauffe pas<br /> <br /> Belle journée           A bientot Parfums de<br /> Campagne    €lian€<br /> <br /> <br /> <br />
Répondre
K
<br /> <br /> un petit coucou en ce vendredi ! bonne journée !$<br /> <br /> <br /> <br />
Répondre
B
<br /> <br /> intéressant je découvre ... je vais revenir ..<br /> <br /> <br /> je clic de soutien .. aussi ....<br /> <br /> <br /> Bien à toi !<br /> <br /> <br /> <br />
Répondre
V
<br /> <br /> merci pour ton passage, des trucs intéressants ici !$$$<br /> <br /> <br /> <br />
Répondre
A
<br /> <br /> N'hésite pas à revenir ! Bises<br /> <br /> <br /> <br />
C
<br /> <br /> 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 !!!<br /> <br /> <br /> <br />
Répondre
S
<br /> <br /> 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<br /> 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.<br /> <br /> <br /> 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<br /> drole de nom.<br /> <br /> <br /> Aide moi STP<br /> <br /> <br /> <br />
Répondre
A
<br /> <br /> Pixule est vraiment le site top pour les sondages. tu peux modifier la taille en allant dans le code : width et height, valeurs à changer<br /> <br /> <br /> <br />
S
<br /> <br /> Cliiiiiiiiiic quotidien, pas grand chose à dire a part que...<br /> <br /> <br /> C'EST LES VACANCES !!!<br /> <br /> <br /> Bonne journée, Steve<br /> <br /> <br /> <br />
Répondre

Présentation

  • : 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