Médiaforma

All posts tagged sélection

Pour sélectionner une portion d’image, choisissez l’outil Sélection dans la palette d’outils et la forme de la sélection dans la partie inférieure de la palette d’outils.

Les formes de base sont les suivantes :

  • Rectangle ;
  • Ellipse ;
  • Coins arrondis ;
  • Losange ;
  • Triangle.

Cliquez sur l’image avec le bouton gauche de la souris, maintenez ce bouton enfoncé et faites glisser le pointeur jusqu’à ce que la zone sélectionnée ait la taille désirée. Pendant le déplacement de la souris, des pointillés animés matérialisent la sélection.

Remarque

Si la zone à sélectionner est carrée, maintenez la touche Maj enfoncée pendant la sélection. La zone sélectionnée sera automatiquement carrée.

Pour modifier une sélection, pointez l’un de ses côtés avec la souris. Le pointeur se transforme en une double flèche. Maintenez le bouton gauche de la souris enfoncé et déplacez le pointeur pour obtenir la sélection désirée.

Pour désélectionner la portion d’image sélectionnée, il suffit de cliquer avec le bouton gauche de la souris en dehors de la sélection ou d’appuyer sur la touche Echap du clavier.

Vous pouvez également opter pour des sélections aux formes non géométriques :

  • Sélection au lasso : maintenez le bouton gauche de la souris enfoncé et tracez le contour de la sélection à main levée.
  • Sélection polygonale : cliquez à plusieurs reprises pour définir chacun des angles du polygone.

Les icônes Carré, Format 4:3 et Format 3:2 définissent une sélection carrée, rectangulaire de rapport 4/3 et rectangulaire de rapport 3/2.

L’icône Inverser inverse la sélection. Ici par exemple, la tête de la tulipe la plus haute est sélectionnée. En cliquant sur l’icône Inverser, la sélection s’inverse. La zone sélectionnée correspond donc à toute l’image hormis la tête de la tulipe la plus haute.

L’icône Centrer déplace la sélection au centre de l’image.

L’icône Paramétrage manuel permet de sélectionner une portion de l’image en choisissant les coordonnées de la sélection et la forme à utiliser :

Photofiltre - L'outil Sélection

Enfin, l’icône Charger une forme permet d’utiliser une forme qui avait été sauvegardée au préalable sur une unité de masse, par vous-même ou par les concepteurs de PhotoFiltre. Ici par exemple, nous choisissons la forme prédéfinie Chat.

La forme est insérée dans l’image. Elle peut être librement redimensionnée et déplacée.

Lorsque vous sélectionnez une portion de l’image, le reste de l’image est protégé de vos modifications : celles-ci n’occulteront que la partie sélectionnée. Par exemple, si vous appuyez sur la touche Suppr du clavier, seule la forme sélectionnée est supprimée.


Pour sélectionner une bande de texte verticale, placez le pointeur sur le coin supérieur gauche de la bande. Maintenez enfoncés la touche Alt et le bouton gauche de la souris pendant que vous faites glisser le pointeur vers le coin inférieur droit de la bande. Dans cet exemple, les données sont réparties sur plusieurs colonnes à l’aide de tabulations. La sélection est limitée aux données situées dans la troisième colonne.


Pour sélectionner un caractère, déplacez le pointeur de la souris sur la gauche du caractère. Appuyez sur le bouton gauche de la souris et maintenez-le enfoncé pendant que vous faites glisser le pointeur vers la droite. Relâchez alors le bouton gauche de la souris.

Pour sélectionner un mot, double-cliquez sur le mot.

Pour sélectionner une ligne, cliquez dans la zone située à gauche de la ligne que vous souhaitez sélectionner.

Pour sélectionner un paragraphe(*), double-cliquez dans la zone située à gauche du paragraphe.

Enfin, pour sélectionner tout le document, appuyez simultanément sur les touches Ctrl et A du clavier.

(*) Un paragraphe peut être composé d’une ou de plusieurs lignes de texte. Il se termine toujours par un passage à la ligne, obtenu en appuyant sur la touche Entrée du clavier.


Vous pouvez utiliser la fonction each() sur une sélection pour lui appliquer des traitements nombreux et/ou complexes. Voici la syntaxe à utiliser (index représente l’index des éléments parcourus) :

$('sélecteur').each(function(index){
  // Traitement
});

Pour accéder individuellement à chacun des éléments parcourus, vous utiliserez le mot this.

Tapez le code suivant dans NotePad++ et sauvegardez-le sous le nom each.htm.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Sélecteurs CSS</title>
    <script src="jquery.js"></script>
  </head>
  <body>
    <span></span> <span></span> <span></span> <span></span> <span></span>
    <script>
      $(function() {
        $('span').each(function(index){
          this.innerHTML = index;
        });
      });
    </script>
  </body>
</html>

Examinez le code. Quel va être le résultat selon vous ?

Le corps du document contient 5 éléments span. Le code jQuery affiche la valeur de l’index dans chacun des span. On peut donc s’attendre à l’affichage des chiffres 0 à 4.

 

 

Exercice : Définissez un tableau de 16×10 où sont affichés les nombres hexadécimaux compris entre #0 et #9f. Voici le résultat à obtenir :

 

Pour cela, vous utiliserez la fonction each() et la fonction toString(16) pour convertir un nombre en hexadécimal.

 

Solution :

Voici le code utilisé :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Nombres hexadécimaux</title>
    <script src="jquery.js"></script>
    <style>
      td {width: 40px; text-align: center; height:10px;}
    </style>
  </head>
  <body>
    <table border>
    <tr><td>1</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    </table>
    <script>
      $(function() {
        $('td').each(function(index){
          this.innerHTML='#'+index.toString(16);
        });
      });
    </script>
  </body>
</html>

Une nouvelle technique permet de sélectionner plus facilement des éléments dans l’Explorateur de fichiers. Ouvrez l’Explorateur de fichiers, puis basculez sur l’onglet Affichage dans le Ruban et cochez la case Cases à cocher des éléments dans le groupe Afficher/Masquer. De petites cases à cocher apparaissent à gauche de chaque élément (dossier ou fichier) affiché dans l’Explorateur. Pour effectuer des sélections multiples, il vous suffit maintenant de cocher les cases correspondantes.

Bien entendu, les techniques conventionnelles sont toujours utilisables. Par exemple :

  • Si les éléments à sélectionner sont contigus : cliquez sur le premier élément, maintenez la touche Maj enfoncée et cliquez sur le dernier élément.
  • Si les éléments à sélectionner sont disjoints : maintenez la touche Ctrl enfoncée et cliquez tour à tour sur les éléments à sélectionner.
  • Pour sélectionner tous les éléments du dossier courant, utilisez le raccourci Ctrl+A.

Pour sélectionner des éléments dans le DOM, il suffit de les préciser, entre apostrophes, dans les paramètres de la fonction jQuery :

$('sélecteur')

 

Le tableau suivant rassemble quelques sélecteurs qu’il faut connaître.

Sélecteur Effet
div Un nom de balise, sans les caractères < et >, permet de sélectionner cette balise. Si plusieurs balises de même nom se trouvent dans le document, toutes ces balises sont sélectionnées. Par exemple, si le document contient plusieurs balises <div>, le sélecteur CSS div sélectionne toutes ces balises.
#premier Le signe # fait référence à l’attribut id (ou identifiant) d’une balise. Par exemple, si vous définissez la balise <p id=”premier”>, le sélecteur #premier sélectionne cette balise. Notez que deux balises ne peuvent pas avoir le même identifiant.
.rouge Le point fait référence à l’attribut class d’une balise. Supposons que vous ayez défini la balise <h2 >. Le sélecteur .rouge sélectionne cette balise. Plusieurs balises peuvent avoir la même classe. Un même traitement pourra donc être appliqué à ces deux balises. Pour différencier les balises <h2> de classe rouge des balises <p> de classe rouge, vous utiliserez les sélecteurs h2.rouge et p.rouge. Ce cas particulier s’applique à toutes les balises et toutes les classes. Ainsi, le sélecteur nom_balise.nom_classe permet de sélectionner les balises nom_balise de classe nom_classe.
ul li Supposons maintenant que vous ayez défini une liste à puces <ul></ul> et une liste numérotée <ol></ol>. Chacun des éléments des deux listes est repéré par des balises <li>. Pour différencier les éléments <li> de la liste à puces des éléments <li> de la liste numérotée, vous utiliserez un « sélecteur descendant ». Ainsi, le sélecteur ul li s’adresse à tous les éléments <li> de la liste à puces <ul>, et le sélecteur ol li s’adresse à tous les éléments <li> de la liste numérotée <ol>.
[src] Certaines balises HTML peuvent contenir un ou plusieurs attributs. Par exemple, la balise <img src=”chien.jpg” width=”40″ height=”30″> contient trois attributs : src, width et height. Pour sélectionner toutes les balises qui contiennent un attribut src, vous utiliserez le sélecteur [src].
[width=”40″] Vous pouvez même aller plus loin en sélectionnant les balises dont un attribut a une certaine valeur. Par exemple, pour sélectionner toutes les balises dont l’attribut width a pour valeur 40, vous utiliserez le sélecteur [width=”40″].
* Le caractère * représente toutes les balises du document.

 

Tapez le code suivant et sauvegardez-le sous le nom selections.htm.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Sélecteurs CSS</title>
  </head>
  <body>
    <ul>
      <li>Liste à puces 1 : élément 1</li>
      <li>Liste à puces 1 : élément 2</li>
      <li>Liste à puces 1 : élément 3</li>
    </ul>
    <div>
      <ul>
        <li>Liste à puces 2 : élément 1</li>
        <li>Liste à puces 2 : élément 2</li>
        <li>Liste à puces 2 : élément 3</li>
      </ul>
    </div>
    <ol>
      <li>Liste numérotée : élément 1</li>
      <li>Liste numérotée : élément 2</li>
      <li>Liste numérotée : élément 3</li>
    </ol>
    <script src="jquery.js"></script>
    <script>
      $(function() {
        // Insérer le code jQuery ici
      });
      </script>
  </body>
</html>

 

Exercice

Pour l’instant, admettez que l’instruction suivante affecte un arrière-plan de couleur jaune à un élément HTML quelconque :

css(‘background-color’,’yellow’);

Ajoutez les sélecteurs nécessaires pour affecter la couleur d’arrière-plan yellow :

  1. à toutes les balises <ul>
  2. aux balises ul de classe vert
  3. aux balises <ul> contenues dans une balise <div>
  4. aux balises <li> contenues dans une balise <ul> contenues dans une balise <div> et dont l’attribut class vaut impair
  5. aux balises <li> contenues dans une balise <ol>
  6. aux balises <li> qui possèdent un attribut class

Solution

  1. $('ul').css('background-color','yellow');
  2. $('ul.vert').css('background-color','yellow');
  3. $('div ul').css('background-color','yellow');
  4. $('div ul li[class="impair"]').css('background-color','yellow');
  5. $('ol li').css('background-color','yellow');
  6. $('li[class]').css('background-color','yellow');

Pour en terminer avec les sélecteurs CSS, je vais vous montrer comment modifier les caractéristiques des balises qui contiennent un attribut dont la valeur contient une chaîne donnée.

A titre d’exemple, nous allons écrire en rouge les balises <p> dont l’attribut title contient le mot paragraphe.

Comme vous pouvez le voir, seuls les premier, deuxième et cinquième paragraphes ont un attribut title qui contient le mot paragraphe. Le sélecteur à utiliser est le suivant :

p[title*=”paragraphe”]

L’astérisque indique que l’attribut doit contenir le texte entre guillemets. Sans lui, seuls les paragraphes dont l’attribut title vaut paragraphe seraient concernés.

Pour que les paragraphes dont l’attribut title contient le mot paragraphe apparaissent en rouge, il suffit d’ajouter color: red; à la suite du sélecteur et de l’entourer d’accolades. Voici le résultat :