Vous êtes ici :   Accueil » Texte défilant
  
Tutos GuppY
Tuto WEB
 ↑  

 1010618 visiteurs

 7 visiteurs en ligne

  • Pratique
  • Horizontalement
  • Verticalement
  • Avec images

Comment se servir des informations sur le site pour créer la même chose sur le sien.
Pour vous faciliter la tâche, j'ai implanté dans les différents articles de cette section du code.
Il suffit de copier et de coller ce code à l'endroit souhaité de votre site, il y aura bien quelques modifications à effectué en fonction du résultat espérer.
Comment se servir du code donné ici pour insérer un texte défilant sur son propre site
S'il s'agit d'un article, saisir le texte au-préalable et lasser un "trou" afin de placer le texte défilant (appuyer une fois sur la touche ENTREE)
Après avoir sélectionné le modèle souhaité, il faut sélectionner et copier le code qui se trouve dans les cadres jaunes.
 

selection_code.jpg
 
Lorsque le code est sélectionné, laisser le pointeur de la souris dans la zone de sélection (ici en noir), appuyer sur le bouton droit de la souris afin d'activer le menu contextuel et cliquer sur la commande Copier.
passage_code_source.jpg
 

Revenir à votre article.
Cliquer ensuite sur le bouton Source de la barre d'outils afin d'ouvrir la fenêtre où l'article est écrit codé.
Repérer ensuite l'endroit ou positionner le curseur afin de coller le code au bon endroit dans l'article.
 

code_source.jpg
 

Ouvrir une nouvelle fois le menu contextuel et activer la commande Coller.
Effacer VOTRE TEXTE ICI et le remplacer par celui de votre choix, modifier également certains paramètres, comme la taille, la couleur....
Enregistrer grâce au bouton OK.
Une fois de retour dans l'éditeur, ne pas oublier d'enregistrer le travail.

FAIRE DEFILER UN TEXTE

Dans la boîte centrale :

Voici plusieurs façons de faire défiler un texte.

Le texte défile dans le sens de la lecture:

Cette phrase de couleur rouge, défile dans le sens de lecture

Le code pour obtenir ce défilement se trouve ci-dessous :

CODE
<p><marquee>
 <font size="2" face="Verdana" color="#ff0000">
 VOTRE TEXTE ICI
 </font>
 </marquee>
 </p>

En changeant certains paramètres

Ce que l'on peut faire sur un texte classique est également accepté,, comme modifier la couleur du texte ou mettre un fond, mais également le vitesse de défilement .

voici le même texte que celui juste au-dessus avec une couleur et une taille de police différente

Copier le code ci-dessous afin d'obtenir ce résultat, il suffira de remplacer VOTRE TEXTE ICI par le texte de votre choix.

CODE
<p>
 <marquee>
 <font size="3" face="Verdana" color="#0000ff">
 VOTRE TEXTE ICI
 </font>
 </marquee>
 </p>

Choisir la vitesse de  défilement :

Il est également possible de choir la vitesse de défilement du texte :

On est pas pressé, on a tout son temps !!! Je reste en vitesse lente

Pressons tout de même le pas, je passe à la vitesse supérieure

J'ai compris, allons de plus en plus vite...

Le code ci-dessous est celui du premier exemple : la vitesse est réglée sur la valeur  1, pour accélérer cette vitesse il suffit d'augmenter la valeur qui suit le signe égal juste après l'attribut scrollamount.

CODE
<p>
 <marquee scrollamount="1">
 <font size="2" face="Verdana" color="#408080">
 VOTRE TEXTE ICI
 </font>
 </marquee>
 </p>

Choisir le sens du défilement :

Vers la droite:

C'est pas mal aussi dans ce sens

CODE
<p>
 <marquee direction="right">
 <font size="2" face="Verdana" color="#782ea9">
 VOTRE TEXTE ICI
 </font>
 </marquee>
 </p>

Cette possibilité d'inverser le sens de défilement est donné par l'attribut "direction" qui suivie de sa valeur, dans ce cas  "right".

Sens alterné:

Allez ! Maintenant un coup à gauche ! Un coup à droite

CODE
<p>
 <marquee behavior="alternate">
 <font size="2" face="Verdana" color="#782ea9">
 VOTRE TEXTE ICI 
 </font>
 </marquee>
 </p>

La balise marquee suivi de l'attribut behavior auquel on donne la valeur  "alternate" permet d'obtenir cette alternance du défilement.

Mettre un fond :

Sur tout la largeur disponible:

Avec un fond de couleur, on distingue souvent bien mieux la phrase qui défile

Le texte défilant a maintenant un fond jaune donné par le code qui suit l'attribut bgcolor

CODE
<p>
 <marquee bgcolor="#FFFF00">
 <font size="2" face="Verdana" color="#782ea9">
 VOTRE TEXTE ICI 
 </font>
 </marquee>
 </p>

Sur une portion de la largeur disponible:

Je n'ai pas toujours besoin de toute la place disponible

Grâce à l'attribut width auquel la valeur 50% a été donnée, le texte n'occupe ici que la moitié de l'espace disponible.

CODE
<p align="center">
<marquee width="50%" bgcolor="#ffff00">
<font face="Verdana" color="#ff0000" size="2">
VOTRE TEXTE ICI 
</font>
</marquee>
</p>

FAIRE DEFILER UN TEXTE

Dans la boîte latérale :

Du bas vers le haut :

Il est possible de faire défiler un texte horizontalement dans les boîtes latérales, mais dans la plupart des cas, il est plus pratique que ce défilement soit orienté verticalement.

Pour les exemples ci-dessous on suppose que la "hauteur disponible" pour le défilement est de 180px et que le "taux" d'occupation de la boîte sur sa largeur sera de 90%.

 
TITRE DE LA BOITE
En utilisant la même balise, il est possible de faire défiler le texte verticalement
Ici
du bas
vers le haut
 Il faut ici utiliser la balise marquee auquelle il sera nécessaire d'indiquer la direction de défilement du texte ici up


Pour faire défiler le texte du bas vers le haut, recopier le code ci-dessous

CODE
<marquee direction="up" scrollamount="4" 
style="padding: 5px; width: 90%; height: 180px;
  <p align="center">
 <font size="2" face="Verdana">
 VOTRE TEXTE ICI
 </font>
 </p>
 </marquee>


Du haut vers le bas :
 

 
TITRE DE LA BOITE
En utilisant la même balise, il est possible de faire défiler le texte verticalement
Ici
du haut
vers le bas
 Il faut ici utiliser la balise marquee auquelle il sera nécessaire d'indiquer la direction de défilement du texte ici down


Pour faire défiler le texte du haut vers le bas, recopier le code ci-dessous :

CODE
<marquee direction="down" scrollamount="4" 
style="padding: 5px; width: 90%; height: 180px;
  <p align="center">
 <font size="2" face="Verdana">
 VOTRE TEXTE ICI
 </font>
 </p>
 </marquee>


Il est possible comme pour le défilement horizontal, d'en régler la vitesse.

 
TITRE DE LA BOITE
Pour donner le temps à vos visiteurs de lire le texte sans devoir battre un record de vitesse de lecture, il est possible de diminuer la vitesse de défilement
 Comme précédemment nous utiliserons l'attribut scrollamount suivi du nombre permettant de définir la vitesse 'dans cet exemple le réglage est à 2


Pour faire défiler le texte du bas vers le haut et régler la vitesse de défilement, recopier le code ci-dessous :

CODE
<marquee direction="up" scrollamount="2" 
style="padding: 5px; width: 90%; height: 180px;
  <p align="center">
 <font size="2" face="Verdana">
 VOTRE TEXTE ICI
 </font>
 </p>
 </marquee>


Il est parfois utile d'arrêter provisoirement le défilement pour le reprendre par la suite.

 
TITRE DE LA BOITE
Comme précédemment le défilement peut être continu. Si le visiteur passe le pointeur de la souris dans la zone de texte ce défilement doit s'arrêter
 Le passage de la souris sur le texte a pour effet d'en arrêter le défilement et lorsque celle-ci quitte cette même zone, le défilement reprend.


Pour faire défiler le texte du bas vers le haut, de régler la vitesse de défilement et d'interrompre celui-ci au passage de la souris, recopier le code ci-dessous :

CODE
<marquee direction="up" scrollamount="2" 
 onmouseout="this.start()" 
 style="padding: 5px; width: 90%; height: 180px;
 "onmouseover="this.stop()">
 <p align="center">
 <font size="2" face="Verdana">
 VOTRE TEXTE ICI
 </font>
 </p>
 </marquee>

On peut également faire défiler des images accompagnant un texte, à l'intérieur d'une boîte latérale.

 
TITRE DE LA BOITE
On saisit  d'abord son texte, on insère les images de façon la plus classique en cliquant sur l'icone
bouton_image.jpg
comme pour celles qui suivent : 
celle-ci
bouton1.jpg
puis celle-là
 gymale.gif
ou encore cette dernière
 php.gif
 Il faut ici utiliser la balise marquee auquelle il sera nécessaire d'indiquer la direction de défilement du texte ici up

 Dans une boîte libre, on peut dans un premier temps faire comme si te texte était fixe, on insère ensuite les images aux endroits souhaités.

En pratique :

boite_libre_editeur.jpg boite_libre_fixe.jpg
Dans l'éditeur, entrer le texte, le mettre en forme et placer les images. Les différents éléments prennent naturellement leur place dans la boîte libre en fonction de la mise en page réalisée dans celui-ci.

Reste maintenant à insérer le code qui permet de faire défiler l'ensemble dans cette boîte libre.

1° cas :

Défilement continu.

Code à placer dans le code source  AVANT L'ENSEMBLE réalisé précédemment

CODE
<marquee direction="up" 
 scrollamount="2" 
 style="padding: 5px; 
 width: 90%; height: 180px;">

Le sens de défilement se fera de bas en haut, les dimensions de la zone de défilement sont données par la hauteur "height"  (ici 180px) et le "taux" d'occupation  fix" à 90% de la boîte latérale suivant sa largeur.

Code à placer APRES L'ENSEMBLE réaliser précédemment.

CODE
</marquee>

2° cas :

Défilement avec des arrêts lors que la souris est sur le boîte.

Code à placer dans la code source  AVANT L'ENSEMBLE réaliser dans l'éditeur de la boîte libre.

CODE
<marquee onmouseover="this.stop()" 
 style="padding: 5px; 
 width: 90%; height: 180px;
 " onmouseout="this.start()" 
 scrollamount="1" 
 direction="up" 
 behiavor="scroll">

Code à placer APRES CE MEME ENSEMBLE.

CODE
</marquee>


Exemple :

La totalité du code que l'on peut voir dans la source peut sembler un peu long, à titre d'exemple voici la totalité de ce qui apparaît dans la code source pour obtenir le défilement du texte et des images présentés en haut de cette fenêtre avec l'option qui permet d'avoir l'arrêt du défilement au passage de la  souris.

CODE
<marquee onmouseover="this.stop()" 
 style="padding: 5px; width: 90%; height: 180px;"
  onmouseout="this.start()" scrollamount="1" 
 direction="up" behiavor="scroll">
 <div style="text-align: center;">
 <font size="2" face="Verdana">
 On saisit&nbsp; d'abord son texte, 
 on insère les images de façon 
 la plus classique en cliquant sur 
 l'icone <br />
 <img width="25" height="24" border="0" 
 title="bouton_image.jpg" alt="bouton_image.jpg"
 src="img/bouton_image.jpg" /> <br />
 comme pour celles qui suivent :&nbsp; <br />
 <span style="font-weight: bold;">
 celle-ci </span><br />
 <img width="110" height="28" border="0" 
 title="bouton1.jpg" alt="bouton1.jpg"
 src="img/bouton1.jpg" />
  <br /><span style="font-weight: bold;">
 puis celle-là</span><br />&nbsp;
 <img width="61" height="39" border="0" 
 title="gymale.gif" alt="gymale.gif" 
src="img/gymale.gif" /> <br />
 <span style="font-weight: bold;">
 ou encore cette dernière</span><br />&nbsp;
 <img width="95" height="50" border="0" 
 title="php.gif" alt="php.gif"< /br> 
src="img/php.gif" />
 <br body="" /></font></div>
 </marquee>
 

3° cas :

Défilement horizontal.

 

Il est également possible de faire de la même façon, défiler des images horizontalement, comme ci dessous :

 

egypte_01.jpgegypte_02.jpgegypte_03.jpgegypte_04.jpgegypte_05.jpgegypte_06.jpgegypte_07.jpgegypte_08.jpgegypte_09.jpgegypte_10.jpg



 

Méthodoogie :
J'ai d'abord dimensionné toutes les images à 200px de large pour 150px de hauteur.
Ces images ont été ensuite regroupées dans un dossier "egypte"  qui a été placé dans le dossier "img" de guppy.
Il ne reste plus ensuite à se placer dans le code source de l'éditeur et de copier le code qui se trouve dans un fil de discussion du forum..


Date de création : 08/05/2015 04:29
Catégorie : Tuto WEB - Astuces
Page lue 15060 fois
  Suivant

 
Vous êtes ici :   Accueil » Texte défilant

Se reconnecter :
Votre nom (ou pseudo) :
Votre mot de passe
Hn4r
Recopier le code :


  Nombre de membres 17 membres
Connectés :
( personne )
Snif !!!
Pour avoir des nouvelles de ce site, inscrivez-vous à notre Newsletter.
Hn4r
Recopier le code :
2 Abonnés

Conformément à la loi française Informatique et Liberté (article 34), vous disposez d'un droit d'accès, de modification, de rectification et de suppression des données vous concernant.

Sitemap