Imprimer la Page | Fermez la fenêtre

Créer un texte défilant horizontal ou vertical

Imprimé depuis: Forum openElement
Categorie:

openElement


Nom du Forum: Scripts pour votre site
Description du Forum: Exemple de scripts utilisables dans les blocs de codes
URL: https://forums.openelement.uk/fr/forum_posts.asp?TID=20330
Date: 20 Avr 2024 à 15:09
Version logiciel: Web Wiz Forums 12.04 - http://www.webwizforums.com


Sujet: Créer un texte défilant horizontal ou vertical
Posté par: Maurice306
Sujet: Créer un texte défilant horizontal ou vertical
Posté le: 06 Jan 2015 à 10:54
A l'occasion des fêtes certains souhaitent positionner des textes défilant sur leurs site, de nombreux exemples se trouvent sur le net, je vous propose ceux que j'ai utilisé à diverses occasions qui sont simples d'utilisation.

Vous pouvez utiliser la commande "marquee" pour faire défiler un texte. Elle fonctionne avec les navigateurs modernes. La vitesse par contre peut varier de l'un à l'autre (plus rapide souvent sur PC).

Dans OE il faut positionner le script dans un bloc de code visible. Pour le dimensionner => "Propriétés" => "Commun" => "Redimensionnement" = "Largeur et hauteur".

 Défilement horizontal sur fond coloré jaune : Voici la syntaxe de base :

 <marquee behavior="scroll" direction="left" scrollamount="3" scrolldelay="60" onMouseOver="this.stop()" onMouseOut="this.start()" bgcolor="#CCFF00">TEXTE A DIFFUSER</marquee>

 Pour un texte sur fond blanc supprimer le script (bgcolor="#ccff00")

Pour un texte en gras

<P><FONT size=3><STRONG><marquee behavior="scroll" direction="left" scrollamount="3" scrolldelay="60" onMouseOver="this.stop()" onMouseOut="this.start()" bgcolor="#CCFF00">VOTRE TEXTE A DIFFUSER ICI</marquee></STRONG></FONT></P>

La variable "scrollamount" permet de définir le pas (en pixel) de défilement plus le chiffre est élevé plus c'est rapide.

Avantage avec ce code "onMouseOver et onMouseOut", le survol de la souris arrête le défilement (pour lecture), en ressortant la souris de la zone le défilement reprend.

Défilement horizontal : dans un cadre pour faire défiler un texte avec aller et retour sur un fond coloré rouge

<marquee scrolldelay="60" scrollamount="3" width="400" direction"left" behavior="alternate" bgcolor="#FF0000">Bienvenue</marquee>

Veillez à bien séparer les paramètres par un espace et à ne pas oublier les guillemets.

Défilement vertical à placer dans un Code source lui même dans un panneau d'élément :

<marquee behavior="scroll" direction="up" height="140" width="400" scrollamount="1" scrolldelay="60" onMouseOver="this.stop()" onMouseOut="this.start()">Votre texte</marquee>

Pour un texte en gras

<P><FONT size=3><STRONG><marquee behavior="scroll" direction="up" height="140" width="400" scrollamount="1" scrolldelay="60" onMouseOver="this.stop()" onMouseOut="this.start()">Votre texte</marquee></STRONG></FONT></P>

Avantage avec ce code, le survol de la souris arrête le défilement (pour lecture), en ressortant la souris de la zone le défilement reprend. Images, liens sont possibles entre les balises "marquee".
La valeur "height" définissant la hauteur de la boîte de défilement et "width" la largeur. Supprimer ces données dans OE pour une adaptation par la fenêtre du panneau d'élément "Bloc de code visuel"

Valeurs des couleurs pour le web (RGB) :

JAUNE=   #CCFF00   ; ORANGE=   #FF9933   ; VERT TRES CLAIR=   #00FF33  ; VERT CLAIR=   #99FF00

BLEU TRES CLAIR=   #00CCCC   ; GRIS CLAIR=   #DDDDDD   ; BLANC=   #FFFFFF

Une autre version qui gère la vitesse de défilement, le sens de défilement, la dimension largeur et hauteur, la couleur du texte et sa taille avec en plus l'arrêt du défilement au passage de la souris :  

<MARQUEE WIDTH="365px"; HEIGHT="15px" onmouseout="this.start();" onmouseover="this.stop();" direction="left" height="15" width="365" scrollAmount="3" align="center" FONT color="#3D849E" size="5">Votre texte ici</MARQUEE>



-------------
La vie est belle !!!....., elle est comme chacun se la fait. Ne soyez pas pressé, partez plus tôt, car il n'y a pas de personnes pressée elles ne sont qu'en retard !!!



Imprimer la Page | Fermez la fenêtre

Forum Software by Web Wiz Forums® version 12.04 - http://www.webwizforums.com
Copyright ©2001-2021 Web Wiz Ltd. - https://www.webwiz.net