[Plan du site] Vous êtes ici --- > Le Site du Zér0 > Les tutoriels > Non-Officiels > Site Web > Javascript > Lecture du tutoriel

Couleur progressive

	Auteur : Bump Créé : le 14/03/2006 06:21:08 Modifié : le 27/05/2008 15:47:47 Noter et commenter ce tutoriel Imprimer ce tutoriel

Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)

Les CSS, c'est bien... mais parfois, on en voudrait un peu plus lorsqu'on navigue sur des sites flash qui nous en mettent plein la vue.

Dans ce tutoriel, je vais tenter de vous apprendre à utiliser Javascript pour ajouter un effet de transition de couleur, par exemple sur des liens. Ça sera déjà un pas vers un site plus "flashant".

À noter que je ne parlerai pas des bases du langage. Cet article s'adresse donc aux personnes qui ont quelques notions en Javascript.

Sommaire du chapitre :

Une bonne base
Comment faire une transition de couleur ?
On code tout ça

Une bonne base

Du code html propre

Histoire de ne pas engorger votre page de code Javascript, on va dès le départ l'inclure via un fichier séparé plutôt qu'en pleine page. Je passe sur les détails mais c'est beaucoup mieux.

Code : HTML

<html>
  <head>
    <title>Une page que ses liens y sont jolis</title>
    <script type="text/javascript" src="trans.js"></script>
  </head>
  <body>
    <a class="trans" href="#">Un lien en exemple</a>
  </body>
</html>

On prépare donc notre document html en ajoutant la balise script et son attribut src qui pointe vers trans.js, fichier qui contiendra tout ce qui est nécessaire pour modifier notre page proprement.
On ajoute un lien auquel on attribue la classe CSS trans, qui nous permettra de le différencier aisément des autres liens éventuels.

La base du fichier javascript

Code : JavaScript

window.onload = function()
{
    // c'est ici qu'on va travailler
}

window.onload est un évènement déclenché lorsque le navigateur a terminé le chargement du document. C'est donc à la fin du chargement que le script va entrer en action.

Récupérer les liens sans se fatiguer

On va donc récupérer tous les liens dont l'attribut class vaut trans. Heureusement, l'objet document dispose d'une méthode qui va grandement faciliter notre recherche : getElementsByTagName.
Une fois sauvegardés tous les éléments dont le tag est a, il ne nous restera qu'à les séparer avec l'objet className :

Code : JavaScript

var links = document.getElementsByTagName('a');
for(var i = 0; i < links.length; i++)
{
    if(links[i].className == 'trans')
    {
        // c'est ici qu'on transforme les liens
    }
}

Quelques variables

On va aussi déclarer certaines variables : la couleur de départ et la couleur de fin de transition :

Code : JavaScript

1 2	var startRGB = new Array(0, 0, 255); // bleu var targetRGB = new Array(255, 255, 0); // jaune

Comment faire une transition de couleur ?

Pour faire cette transition de couleur, ça n'est en fait pas très compliqué.
Javascript propose, parmi les objets du document, de modifier les propriétés CSS. Ici, c'est la couleur de la police qui nous intéresse, autrement dit la propriété color : element.style.color.

Si le coeur vous en dit, vous devriez jeter un oeil dans l'objet style de n'importe quel élément de votre document. Vous en retireriez probablement beaucoup d'idées.

e.g. : for(i in o.style) document.write('o.style.' + i + ' = ' + o.style[i]);
Ce qui vous affichera tout ce que vous avez toujours voulu inconsciemment savoir. :-°

Pour modifier cette propriété dans le temps, nous utiliserons la fonction setInterval qui nous permettra d'exécuter une fonction à intervalle régulier.

Nous nous servirons aussi des évènements onmouseover et onmouseout des liens qu'on aura isolés pour déclencher les transitions de couleur.

Mis bout à bout :

l'évènement onmouseover déclenchera l'exécution d'une fonction à intervalle régulier (avec setInterval). Cette fonction modifiera la propriété CSS style.color jusqu'à ce qu'elle prenne la valeur voulue : targetRGB ;
l'évènement onmouseout fera la même chose sauf que la valeur de style.color évoluera vers startRGB.

On code tout ça

Un peu de glu

On imbrique nos premiers codes et on ajoute notre excellente idée : :

Code : JavaScript

window.onload = function()
{
    var links = document.getElementsByTagName('a');
    for(var i = 0; i < links.length; i++)
    {
        if(links[i].className == 'trans')
        {
            links[i].id = 'trans' + i; // 1
            links[i].curRGB = new Array(startRGB[0], startRGB[1], startRGB[2]); // 2
            links[i].onmouseover = doTrans; // 3
            links[i].t_over = false;
            links[i].onmouseout = clTrans;
            links[i].t_out = false;
        }
    }
}

On attribue un id à chacun des liens pour pouvoir (plus loin) les manipuler facilement via setInterval.
On sauvegarde la couleur courante ; ça évitera de devoir la rechercher.
On définit les évènements et on initialise les timers :
doTrans sera la fonction pour la transition vers la couleur targetRGB et clTrans, la fonction pour la transition vers la couleur startRGB.
t_over et t_out sont les variables qui nous serviront à vérifier l'état de nos liens.

La fonction doTrans

Code : JavaScript

function doTrans()
{
    if(this.t_out) // 1
    {
        clearInterval(this.t_out);
        this.t_out = false;
    }
    if(this.t_over) return null; // 2
    this.t_over = setInterval('rgbTrans(\'' + this.id + '\',\'' + targetRGB[0] + '\',\'' + targetRGB[1] + '\',\'' + targetRGB[2] + '\')', 25); // 3
}

setInterval permet d'exécuter un code à intervalle régulier.
e.g. : setInterval('alert(\'Hello !\')', 1000) affichera une alerte avec le message "Hello !" toutes les secondes.

t_out est le timer qui correspond à l'intervalle utilisé pour la transition vers la couleur de départ. S'il est différent de false, s'il est actif, on le désactive et on lui donne la valeur false.
Si t_over est déjà actif, on arrête la fonction.
Sinon on l'active en exécutant la fonction de transition (rgbTrans) à intervalle régulier (ici, 25 ms).

Dans la même veine, clTrans

Code : JavaScript

function clTrans()
{
    if(this.t_over)
    {
        clearInterval(this.t_over);
        this.t_over = false;
    }
    if(this.t_out) return null;
    this.t_out = setInterval('rgbTrans(\'' + this.id + '\',\'' + startRGB[0] + '\',\'' + startRGB[1] + '\',\'' + startRGB[2] + '\')', 25);
}

C'est pareil que pour doTrans sauf que ça concerne l'évènement onmouseout.

rgbTrans, on y arrive

On a vu plus haut que setInterval exécute la fonction rgbTrans à intervalle régulier. Cette fonction est destinée à modifier la couleur d'un élément via sont id. En Javascript dans le code, ça donne :

Code : JavaScript

function rgbTrans(id, r, g, b)
{
    var link = document.getElementById(id); // 1
    var i = 25; // 2
    var curRGB = new Array(link.curRGB[0],link.curRGB[1],link.curRGB[2]); // 3
    var destRGB = new Array(parseInt(r),parseInt(g),parseInt(b)); // 4
    if(curRGB[0] == destRGB[0] && curRGB[1] == destRGB[1] && curRGB[2] == destRGB[2]) // 5
    {
        if(link.t_over)
        {
            clearInterval(link.t_over);
            link.t_over = false;
        }
        if(link.t_out)
        {
            clearInterval(link.t_out);
            link.t_out = false;
        }
        return null;
    }
    for(var j = 0; j < 3; j++) // 6
    {
        if(curRGB[j] > destRGB[j])
        {
            curRGB[j] = curRGB[j]-i > destRGB[j] ? curRGB[j]-i : destRGB[j];
        }
        else if(curRGB[j] < destRGB[j])
        {
            curRGB[j] = curRGB[j]+i < destRGB[j] ? curRGB[j]+i : destRGB[j];
        }
    }
    link.curRGB = curRGB; // 7
    link.style.color = 'rgb('+curRGB[0]+','+curRGB[1]+','+curRGB[2]+')'; // 8
}

On sauvegarde l'élément dont l'id est en paramètre de la fonction.
On définit la valeur qui servira à incrémenter et décrémenter les valeurs des couches (rouge, bleu, vert) de la couleur.
On sauvegarde le tableau des valeurs des couches de la couleur courante.
On sauvegarde le tableau des valeurs des couches passées en paramètres de la fonction.
Si les valeurs de la couleur courante sont identiques à celles passées en paramètres, on désactive le timer actif et on arrête la fonction.
On effectue une boucle sur les trois valeurs de la couleur courante et on incrémente ou on décrémente la valeur courante en fonction de la valeur de destination.
On sauvegarde les valeurs de la couleur courante.
On applique la couleur courante.

Voilà un petit effet sympa qui rajoute un peu de punch aux liens.

Cette astuce s'applique évidemment à toute propriété basée sur une couleur. Vous pouvez par exemple modifier, à la place de la couleur de la police, la couleur du fond en modifiant la propriété backgroundColor. Sur un lien en display: block, ça peut rendre pas mal du tout.

Auteur : Bump
Noter et commenter ce tutoriel
Imprimer ce tutoriel