de l'onglet Javascript...Si vous désirez incorporer un texte en dégradé dans une de vos pages HTML, WebExpert 5 voici l'assistant qu'il vous faut.
Pour lancer l'assistant, cliquez sur le bouton
de l'onglet Javascript...
Les commentaires sont ajoutés pour vous permettre de mieux suivre ce long script.
Le but est donc d'afficher le texte fourni à l'assistant (variable texte) en une couleur dégradée (couleur choisir aussi dans l'assistant). Il faut donc attribuer à la chaîne de caractères (de longueur texte.length) des couleurs successives, en fonction d'un facteur choisi par défaut : 256/(texte.length+1) ou texte.lenght est la longueur de votre texte (chaîne de caractères).
Nous allons avoir besoin d'un tableau, et il nous faut donc créer un constructeur pour cela (voir Notions Générales).
Celui-ci est appelé tableau et initialise les éléments du tableau (créé ensuite par new) dont le nombre d'éléments est 9, puisque les chiffres 0 à 9 sont directement convertis en hexadécimal (voir tableau des correspondances de la section "Notions générales"). Au delà de 9, en hexadécimal, c'est la lettre A [10], B[11],C[12],D[13],E[14],F[15].
Pour que les nombres représentant les différentes couleurs soient interprétés par le navigateur, il faut que ces nombres soient convertis en hexadécimal (très proche du binaire d'ailleurs), de base 16 : par exemple, le blanc (#FFFFFF qui correspond à 255 pour le rouge (R), 255 pour le vert (G) et 255 pour le bleu (B). Vous retrouvez ici les valeurs bien connues de (R,G,B) correspondant aux valeurs aux différentes couleurs précitées.
Dans ce script, la conversion ne s'effectuera que pour une seule couleur (R, G ou B) puisque l'assistant ne vous propose qu'une seule couleur de dégradé. Dans le javascript "Flash de l'écran", on devra "jouer" sur les trois couleurs...
Il faut donc créer un tableau qui comprend les valeurs de traduction des nombres (couleur) :
Dans celui-ci, on attribue donc les valeurs supérieures à 9 aux lettres correspondantes à l'hexadécimal, ainsi par exemple, pour la valeur 10 (E) : tabHex[10]="A".
Comme le chiffre de la couleur est représenté par deux caractères hexadécimaux (RGB(0,0,0) pour noir absolu donne #000000, c'est à dire le cardinal (#), les deux premiers chiffres pour le R (00), le toisième et quatrième pour le G (00) et enfin les deux derniers pour le B(00). Le blanc absolu lui, vaut RGB(255,255,255).
On l'a dit, ici, n'est employée qu'une seule couleur : soir R, G ou B qui sera donnée en argument par l'assistant à l'argument RGB de la fonction degrade().
Pour obtenir la représentation hexadécimale de la couleur, il faut chercher la "seizaine" et le chiffre hexadécimal des unités (de 0 à F). La "seizaine" s'obtient en prenant la partie entière (Math.floor ou ParseInt) du nombre divisé par 16. le chiffre hexadécimal des unités s'obtient par le nombre modulo 16 (%16:reste de la division par 16).
Cela donne donc :
C'est ce qui est fait ci-dessus : on prend en premier lien la valeur entière (parseInt(couleur/16) : idem que Math.floor) et ensuite, la partie "décimales", que l'on peut retrouver par (couleur%16).
Une petite précaution :Si hexa1 ou hexa2 est null : le script lui attribue le caractère "0".
Ensuite, on joint les deux caractères (couleurHexa = hexa1 + hexa2) qui est retournée par la fonction conversion().
Tous les éléments sont créés pour que la fonction degrade() puisse s'exécuter. Le ton (différence de couleurs affichées) est affecté par le facteur déterminé [var facteur = 256/(texte.length+1) : (+1 pour ne pas diviser par zéro (0) si texte.length = 0].
La conversion est prévue pour les trois couleurs, alors qu'une seule ne peut être choisie : donc, il faut créer une instruction conditionnelle (if (RGB == 0)) ou RGB est la couleur choisie dans l'assistant [rouge(0), verte(1) ou bleue(2)]
La méthode write() de l'objet document qui permet d'écrire dans le document HTML est employée, avec les attributs de style qui furent choisis dans l'assistant (taille, police, et les différentes valeurs de couleur.
Si vous désirez modifier par la suite la couleur dégradée : changer la valeur de RGB (dernier argument de l'appel de la fonction degrade() situé dans le corps du document : par exemple, rouge pour [0]
Code :