BullGuard Antivirus Sale - 60% Off with openElement !
Accueil Forum Accueil Forum >

openElement

> Scripts pour votre site
  Nouveaux messages Nouveaux messages Fil RSS  - Créer un texte défilant horizontal ou vertical
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

Créer un texte défilant horizontal ou vertical

 Répondre Répondre
Auteur
Message inverser le tri
 Rating: Topic Rating: 1 Votes, Average 5.00  Sujet Recherche Sujet Recherche  Options des sujets Options des sujets
Maurice306 allez vers le bas
Senior Member
Senior Member


Depuis le: 20 Avr 2008
Pays: France
Status: Inactif
Points: 2066
Options des messages Options des messages   Thanks (2) Thanks(2)   Citer Maurice306 Citer  RépondreRéponse Lien Direct à ce Post Sujet: Créer un texte défilant horizontal ou vertical
    Envoyé : 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>



Edité par Maurice306 - 19 Juin 2015 à 07:51
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 !!!
Haut de la page
 Répondre Répondre
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

Cette page a été affichée en 0.063 secondes.