Dégradé de couleurs dans un texte

J'ai beaucoup hésité avant d'installer cet exposé dans la partie Html et Javascript :

Cet évènement me semble être à la limite du gadget ...

Et après avoir fait un peu

vagabonder mon

imagination, je me suis

rendu compte qu'il

existait un domaine où une

telle application avait sa

place :

le texte sur photo.

 

Combien de légendes de

photos ne sont-elles pas

en effet hors écran,

obligeant le visiteur à un

exercice de yo-yo pour

apprécier le sujet !?!

Exercice peu agréable

que vous pourrez

désormais éviter.

 Convaincu ? Intéressé ? Alors, passons au script :

<SCRIPT LANGUAGE="JavaScript"><!--

function bases (n) {

var nb;

this.length = n;

for (var i = 1; i <=n; i++)

if (i<10) {

nb = i+"";

nb = nb.substring(0,1);

this[i] = nb;

}

return this;

}

function modif(couleur) {

var reste=1;

var indice;

var hexa1;

var hexa2;

var couleurHexa;

tabHex = new bases(16);

tabHex[10]="A"; tabHex[11]="B"; tabHex[12]="C"; tabHex[13]="D"; tabHex[14]="E"; tabHex[15]="F";

indice = 1;

hexa2 = (couleur%16);

hexa1 = parseInt(couleur/16);

hexa2 = tabHex[hexa2];

if (hexa2 == null)

hexa2 = "0";

hexa1 = tabHex[hexa1];

if (hexa1 == null)

hexa1 = "0";

couleurHexa = hexa1 + hexa2;

return couleurHexa;

}

function effet(texte, taille, police, RGB) {

var nbCouleurMax = 256;

var facteur = nbCouleurMax/texte.length;

var couleur;

var i;

var c1,c2,c3;

for (i=0;i<texte.length;i++) {

ton=facteur*i;

if (RGB == 0) {

c1 = 'FF'

c2 = modif(ton);

c3 = c2;

}

else if (RGB == 1) {

c1 = modif(ton);

c2 = 'FF'

c3 = c1;

}

else {

c1 = modif(ton);

c2 = c1;

c3 = 'FF'

}

document.write ('<FONT SIZE=' + taille + ' FACE="' + police + '" COLOR="#' + c1 + c2 + c3 + '">' + texte.substring (i,i+1) + '</FONT>');

}

}

//--></SCRIPT>

Cette première partie est à insérer entre les balises HEAD, après le TITLE de votre page.

Elle permet de définir les trois fonctions nécessaires. Une boucle conditionnelle à partir des couleurs de base RGB est alors définie en mode hexadécimal avec un maximum de 256 teintes utilisées sur la totalité du texte. Cette boucle ne limite pas la longueur du texte, ce qui signifie que plus il sera long, plus la nuance sera petite.

Pour être efficace et pour plus de facilité, il est souvent préférable d'avoir recours à de petits textes !

La seconde partie, beaucoup plus simple, sera insérée dans le BODY, à l'endroit précis où elle s'affichera :

<SCRIPT LANGUAGE=JavaScript><!--

effet('Ici, vous écrirez votre texte',2,'Verdana',1)

//--></SCRIPT>

Le texte que vous allez insérer est ici repris en bleu.

La taille de ce texte, exécutable de 1 à 7, est indiquée en vert.

La police de caractères choisie est écrite ci-dessus en fuchsia.

 La couleur de base (RGB), indiquée en brun sera : 0 pour le rouge, 1 pour le vert, 2 pour le bleu.

 Je vois ici votre étonnement face à la dernière phrase écrite dans le 1er exemple : quelques mots en jaune et la suite en blanc, sans dégradé ... Simple script à écrire si ce dégradé n'est pas nécessaire :

<FONT FACE="Arial" COLOR="#FFFF00"><B><SCRIPT LANGUAGE=JavaScript><!--

document.write('Votre texte s'inscrit ici')

//--></SCRIPT></B></FONT>

Ce petit script fait appel à une fonction prédéfinie : document.write

En rouge, vous écrirez le nom de la police de caractères utilisée (universelle si vous voulez l'être !).

En vert, vous indiquerez la couleur de cette police (soit en hexadécimal, soit en clair).

En bleu, ce sera naturellement le contenu de votre texte.

Vous définirez la taille de la police de caractères par les attributs <B> ou <H>.

 Rien ne vous empêche, selon votre fantaisie ou la nécessité, d'alterner ces deux derniers scripts : ils cohabitent parfaitement ! Soyez donc créatif !

A vous de jouer maintenant ...