Mais arrêtez-les !

Publié le par Zoelie

Pour changer un peu du CSS, passons cette fois au HTML ...

Les textes et images défilants de mes modules Textes Libres et de mon Pied de page peuvent être arrȇtés si vous passez simplement votre cursuer dessus (sans cliquer...)
Un texte défilant est pratique pour gagner de la place, mais n'est pas toujours facile à lire; le faire s'arrȇter permet de pouvoir focaliser dessus.

Voici comment faire des textes défilants qui s'arrȇtent lorsque le curseur est dessus :
C'est un code qui s'insère dans la balise <marquee> et donc qui doit se mettre dans le code source de l'endroit où vous voulez afficher votre texte ( i.e: un module Texte Libre ou l'En-tête ou le Pied de page ou un article, bref partout où vous avez accès au bouton Source ...)

Le code pour reconnaître le passage du curseur sur le contenu de la balise <marquee> est
onmouseover
Celui qui represente le fait que le curseur n'est plus sur le texte est
onmouseout
Donc pour faire s'arrêter le texte au passage de la souris, il faut insérer
onmouseover="this.stop();"
Et pour le refaire repartir :
onmouseout="this.start();"

finalement, la balise doit ressembler à :
<marquee  onmouseout="this.start();" onmouseover="this.stop();">

Vous pouvez également demander au texte de défiler vers le haut au lieu de droite à gauche grâce à la commande direction:
direction="up";
et même fixer la hauteur ou la largeur sur laquelle on verra le texte défiler en ajoutant height="XXX" et width="YYY", XXX et YYY étant les valeurs en pixels.

Par exemple, le code
<marquee height="70" direction="up" scrollamount="1" scrolldelay="2" behaviour="scroll" onmouseout="this.start();" onmouseover="this.stop();">Coucou !<br />
Je défile vers le haut <br />
...<br /><img src="http...."/><br />
Passez le curseur sur moi pour arrêter mon défilement .<br />
</marquee>
donneCoucou !
Je défile vers le haut
...


Passez le curseur sur moi pour arrêter mon défilement .

et
<marquee width="50"  scrollamount="2" scrolldelay="1" behaviour="scroll" onmouseout="this.start();" onmouseover="this.stop();"> Moi, je préfère défiler horizontalement.<img src="http://..."/>Passez le curseur sur moi pour arrêter mon défilement .
<br /></marquee>
donne
Moi, je préfère défiler horizontalement. Passez le curseur sur moi pour arrêter mon défilement .


Tous ces codes marchent très bien en mode Confiance.
Il faut toutefois savoir qu'ils peuvent ralentir le chargement de la page .

Publié dans TIP's

Commenter cet article

morue la fée 30/09/2009 00:12


génial ce blog !! et merci pour les conseils ^^


nanou 13/10/2008 20:57

Bonjour:super tes conseil justement cela faisait longtemps que je voulais le faire et pour le défilement de texte c'est réussi grâce a vousj'attends d'autres astuces avec impatience

Chogami :0023: 28/07/2008 21:34

Si je n'avais pas trouvé cette page, j'aurais vraiment eu de sacrés bug sur mon Blog.Merci Zoelie !!!

sylvie 01/09/2007 11:39

bonjour,
tout d'abore pour ton blog, quiest une super vitrine de tout ce que l'on peut faire avec un blog.....moi c pas pareil!
je suis débutante, et je n'arrive à rien!!! voilà mon cas
je suis en niveau confiance et je n'arrive pas à faire un texte défilant ( balise marquee??? vois pas?)
idem pour "retour haut de page!!!!
ouin!!!!! c'est une CATASTROPHE!! au secour....
dis moi que tout n'est pas perdu!
Merci
 

Théo 21/11/2006 18:48

Salut !
Je voudrais savoir si c'est possible de changer la vitesse de défilement voila !