Médiaforma

All posts tagged rvb

Dans cette rubrique, vous allez apprendre à créer un nuancier en agissant sur les composantes Rouge, Verte et Bleue d’une couleur. Pour cela, nous utiliserons trois curseurs <input>. Attention, seuls les navigateurs Safari 5 et supérieur, Chrome 8 et supérieur et Opera 11 et supérieur représentent cette balise en utilisant un curseur.

Voici le code utilisé :

Commençons par examiner le code HTML.

Une balise <div> d’identifiant carre est utilisée pour représenter la couleur qui correspond aux trois composantes RVB.

Les instructions suivantes mettent en place trois balises <input> suivies de trois balises <span>. Les premières serviront à choisir la valeur à affecter à chaque composante et les dernières à afficher la valeur courante de chaque composante, entre 0 et 255.

Examinons le code CSS.

Le style #carre définit lers caractéristiques de la balise <div> d’identifiant carre. Ses dimensions sont fixées à 200 pixels sur 200 et sa couleur d’arrière-plan est rouge à l’ouverture de la page.

Examinons le code JavaScript.

La fonction modifie est exécutée chaque fois qu’un curseur est modifié par l’utilisateur.

Les trois premières instructions lisent la valeur des curseurs sliderR, sliderV et sliderB et les stockent dans les variables r, v et b.

L’instruction suivante affecte ces trois composantes à la propriété backgroundColor de la balise <div> en utilisant la fonction rgb().

Enfin, les trois dernières instructions affichent la valeur courante des trois curseurs dans les balises <span> correspondantes.


Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans la rubrique précédente, vous avez appris à modifier le contenu d’une zone de texte en utilisant la fonction JavaScript getElementById(). Dans cette rubrique, je vais vous apprendre à modifier une propriété CSS avec cette même instruction.

Dans cet exemple, nous allons modifier la couleur d’arrière-plan d’une balise <div>. Pour cela, l’utilisateur entrera une couleur codée en hexadécimal codée ainsi :

#rrvvbb

rr représente la quantité de rouge (entre 0 et FF), vv la quantité de vert (entre 0 et FF) et bb la quantité de bleu (entre 0 et FF) de la couleur à utiliser.

Une fois la couleur entrée, il lui suffira de cliquer sur un bouton de commande pour modifier la couleur de la balise <div>.

Examinons le code HTML.

  • Le corps du document est défini entre les lignes 22 et 31.
  • La ligne 23 définit une balise <div> d’identifiant div1 ;
  • La ligne 24 affiche un texte pour inviter l’utilisateur à saisir une couleur codée en hexadécimal.
  • Les lignes 25 à 28 mettent en place un formulaire pour héberger la zone de texte et le bouton de commande ;
  • La ligne 26 définit la zone de texte d’identifiant saisie ;
  • Enfin, la ligne 27 définit le bouton de commande. Le texte affiché dans le bouton est “Modifier la couleur”. Lorsque le bouton est cliqué, la fonction JavaScript couleur() est exécutée.

L’allure de la balise <div> est définie avec du code CSS, entre les lignes 4 et 11 :

  • Ligne 7, la couleur de l’arrière-plan par défaut est définie à #000000. A l’ouverture de la page, la balise <div> aura donc un arrière-plan noir ;
  • Les dimensions de la balise <div> sont définies lignes 8 et 9. La largeur et la hauteur sont fixées à 200 pixels.

Pour que le code soit complet, il ne reste plus qu’à définir la fonction JavaScript couleur(),entre les lignes 12 et 19 :

  • La ligne 15 crée l’objet objet1 et l’initialise avec l’élément saisie, c’est-à-dire avec la zone de texte dans laquelle est saisi le code de couleur hexadécimal.
  • La ligne 16 crée l’objet objet2 et l’initialise avec l’élément div1, c’est-à-dire avec la balise <div> qui a été mise en place dans le début du document.
  • Quant à la ligne 17, elle affecte à la propriété backgroundColor de la balise <div> le code de couleur hexadécimal qui se trouve dans la zone de texte. A droite du signe “=“, objet1.value récupère le contenu de la zone de texte. Remarquez la syntaxe utilisée à gauche du signe “=” : objet2.style.backgroundColor.
    • objet2 correspond à l’objet lié à la balise <div> div1 ;
    • style indique que l’on s’intéresse à une propriété CSS ;
    • backgroundColor correspond à la propriété CSS background-color.

Remarque
La syntaxe de la ligne 17 n’a rien d’extraordinaire. Cependant, notez que l’accès à la propriété CSS background-color se fait via le mot clé backgroundColor. Le tiret a disparu entre les mots background et color et la première lettre du mot color est en majuscules. Une grande partie de la difficulté à accéder aux propriétés CSS en JavaScript viendra de la syntaxe à utiliser. Cependant, ne vous en faites pas trop, vous verrez que l’utilisation des bons mots clés devient vite machinale pourvu que vous pratiquiez régulièrement.

Exécutons ce code dans un navigateur. A l’ouverture de la page, la balise <div> a un arrière-plan noir. Pour le modifier, il suffit d’entrer un code hexadécimal dans la zone de texte et de cliquer sur le bouton de commande.

Pour trouver facilement le code de couleur hexadécimal d’une couleur donnée, je vous suggère d’utiliser le site http://www.code-couleur.com/.