Médiaforma

All posts tagged backgroundcolor

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

Dans la vidéo précédente, les zones de saisie n’étaient pas alignées verticalement. Nous allons voir comment améliorer leur mise en page en utilisant un tableau. Tant que nous y sommes, nous allons centrer horizontalement les deux <div> et le bouton dans le tableau pour obtenir quelque chose comme ceci :

Examinons le code HTML.

Comme vous pouvez le voir, les différents éléments affichés dans le document ont été placés dans un tableau comportant deux colonnes. Les deux balises <div> et le bouton de commande occupent deux colonnes dans le tableau. Pour cela, il suffit d’affecter la valeur 2 à l’attribut colspan de ces trois éléments. Par contre, les éléments concernant les composantes Rouge, Vert et Bleu sont répartis sur deux colonnes : à gauche les libellés des couleurs, à droite, les zones de saisie. Remarquez l’utilisation de la propriété CSS text-align pour aligner à gauche les trois zones de saisie.

<table>

<tr><td colspan=2><div id=”div1″></div></td></tr>

<tr><td>Rouge</td><td style=”text-align:left;”><input id=”rouge”> (0 à 255)</td></tr>

<tr><td>Vert</td><td style=”text-align:left;”><input id=”vert”> (0 à 255)</td></tr>

<tr><td>Bleu</td><td style=”text-align:left;”><input id=”bleu”> (0 à 255)</td></tr>

<tr><td colspan=2><div id=”hexa”>Définissez les composantes RVB et cliquez sur le bouton</div></td></tr>

<tr><td colspan=2><input type=”button” value=”Afficher la couleur correspondante”></td></tr>

</table>

Examinons le code CSS.

  • La première balise <div> a pour identifiant div1. Ses caractéristiques sont définies entre les lignes 5 et 12. Les trois premières instructions définissent la couleur et les dimensions de la balise <div>. Quant aux deux dernières instructions, elles provoquent le centrage de la balise dans le tableau.
  • Les lignes 13 à 17 définissent la mise en forme des cellules du tableau. Le texte sera centré dans les cellules et les cellules auront une largeur de 300 pixels.

Le code JavaScript est identique à celui de la rubrique précédente. N’hésitez pas à vous y reporter pour avoir de plus amples renseignements à son sujet.


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

Nous allons mettre en pratique ce qui a été vu dans les rubriques précédentes pour afficher une couleur en fournissant ses composantes RVB. Les valeurs Rouge, Vert et Bleu seront saisies dans des zones de texte. Un bouton de commande affichera le code hexadécimal correspondant et affectera ce code à l’attribut CSS background-color d’une balise <div> :

Examinons le code HTML, entre les lignes 29 et 38.

  • La ligne 30 définit la balise <div> d’identifiant div1. Cette balise sera utilisée pour représenter la couleur dont les composantes RVB sont spécifiées par l’utilisateur.
  • Les lignes 32 à 34 définissent les zones de texte d’identifiant rouge, vert et bleu.
  • La ligne 35 définit une deuxième balise <div> d’identifiant hexa. Cette balise sera utilisée pour afficher le code hexadécimal correspondant aux composantes décimales RVB saisies par l’utilisateur.
  • Enfin, la ligne 36 définit un bouton de commande et lui associe la fonction événementielle couleur(). Cette fonction sera exécutée à chaque clic sur le bouton de commande.

Examinons le code CSS, entre les lignes 4 et 11. Ce code est identique à celui des rubriques précédentes. Il définit la couleur d’arrière-plan (ici noir) et les dimensions de la balise <div> d’identifiant div1.

Examinons le code de la fonction JavaScript couleur(), entre les lignes 13 et 25.

  • Les lignes 15 à 17 récupèrent les valeurs numériques décimales qui se trouvent dans les zones de texte rouge, vert et bleu et les stockent dans les variables r, v et b.
  • La ligne 19 utilise ces trois valeurs pour calculer le code la couleur. Ce code est obtenu en multipliant la composante Rouge par 256*256, en y ajoutant la composante Vert multipliée par 256 et en y ajoutant la composante Bleu. Si cette technique ne vous est pas familière, sachez qu’elle permet d’obtenir une valeur unique composée à partir de trois valeurs codées entre 0 et 255.
  • La ligne 20 affecte le code de la couleur à la propriété backgroundColor de la balise <div>. Remarquez l’utilisation de la fonction parseInt() qui fournit une valeur entière à la propriété backgroundColor. Sans cette fonction, la valeur passée serait interprétée comme une chaîne de caractères et la propriété backgroundColor ne serait pas bien initialisée.
  • Il ne reste plus qu’à modifier le contenu de la balise <div> d’identifiant hexa. La ligne 22 définit la variable h et la relie à la balise <div> d’identifiant hexa.
  • La ligne 23 affiche la valeur hexadécimale de la couleur dans la balise <div> d’identifiant hexa. La conversion en hexadécimal est obtenue avec la fonction toString(16) appliquée à la variable codeCouleur.


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/.