Médiaforma

All posts tagged taille

Il est parfois nécessaire de modifier la taille d’une image dans la zone de travail. Pour avoir un plus grand niveau de détail ou au contraire pour afficher une image dans sa totalité.

Pour cela, vous pouvez utiliser :

  • La roulette de la souris ;
  • Les icônes Zoom avant et Zoom arrière de la barre d’outils ;
  • Les touches + et du clavier ;
  • Les commandes inférieures du menu Affichage : Zoom avant, Zoom arrière, Zoom automatique (pour occuper toute la zone de travail) ou Plein écran pour afficher l’image sur tout l’écran. Une fois ce mode activé, appuyez sur la touche Echap pour quitter le mode plein écran et retourner au mode précédemment actif.

Photofiltre - Modifier la taille d'une image dans la zone de travail


Désormais, il est possible d’afficher le début des messages dans le volet d’en-tête. Ainsi, vous pourrez décider rapidement si un message est digne d’intérêt ou s’il mérite d’être mis à la corbeille. Pour choisir le nombre de lignes affichées dans l’en-tête du message, basculez sur l’onglet Affichage dans le ruban, cliquez sur l’icône Aperçu du message et faites votre choix parmi les options proposées :

Ici par exemple, nous avons demandé l’affichage de deux lignes dans l’en-tête des messages :


Vous utiliserez les méthodes offset().left et offset().top pour connaître/modifier la position d’un élément sur l’écran et les méthodes width() et height() pour connaître/modifier la largeur et la hauteur d’un élément par rapport au coin supérieur gauche de l’écran.

Exercice 1

Entrez le code suivant dans NotePad++ et sauvegardez-le sous le nom taille-et-position.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Taille et position des éléments sur la page</title>
    <style>
      #boite {
        position: absolute;
        top: 40px;
        left: 50px;
        width:300px;
        height: 200px;
        background-color: yellow;
        border: solid;
        border-width: 2px;
        border-color: black;
      }
    </style>
  </head>
  <body>
    <script src="jquery.js"></script>
    <div id="boite"></div>
    <p id="status"></p>
    <script>
      $(function() {
        //Insérer le code jQuery ici
      });
    </script>
  </body>
</html>

Ajoutez les instructions jQuery nécessaires pour afficher les dimensions et la position de l’élément #boite dans l’élément #status.

 

Solution

var x = $('#boite').offset().left;
var y = $('#boite').offset().top;
var l = $('#boite').width();
var h = $('#boite').height();
$('#status').text('Dimensions : '+l+'x'+h+' px. Position : à '+y+'px du haut et à '+x+' px de la gauche.');

 

Exercice 2

Ajouter deux éléments button au DOM et définir le code jQuery pour que :

  1. Le premier bouton positionne l’élément #boite à 200 pixels du bord gauche et 120 pixels du bord supérieur
  2. Le deuxième bouton redimensionne l’élément #boite à 150×30 pixels

 

Solution

$('#position').on('click',function(){
  $('#boite').offset({top:120,left:200});
});
$('#taille').on('click',function(){
  $('#boite').width('150px').height('30px');
});

Lorsque vous cliquez sur un lien, la page cible s’ouvre dans la même fenêtre. Pour l’afficher dans une fenêtre secondaire, il suffit d’affecter la valeur _blank à l’attribut target de ce lien. Enfin, pour l’afficher dans une fenêtre secondaire de taille bien précise, vous utiliserez la fonction JavaScript window.open(), associée à l’événement onclick de la balise <a>. Définissez l’adresse de la page cible dans le premier paramètre de la fonction, le nom de la fenêtre dans le deuxième paramètre et les dimensions de la fenêtre secondaire dans les paramètres height et width. Ici, la fenêtre secondaire pointe vers le moteur de recherche Bing. Elle a une largeur de 400 pixels et une hauteur de 600 pixels.

Voici le résultat :


Cliquez sur l’image pour la sélectionner. Huit poignées de redimensionnement entourent l’image. Pointez-cliquez-glissez l’une d’entre elles pour obtenir le redimensionnement souhaité.

Pour faire pivoter une image, pointez la poignée de rotation, maintenez le bouton gauche de la souris enfoncé et faites tourner l’image dans le sens et selon l’angle désiré.

Pour réduire la taille de l’image, vous pouvez aussi la rogner, c’est-à-dire raccourcir un ou plusieurs de ses côtés. Sous l’onglet FORMAT, dans le groupe Taille, cliquez sur l’icône Rogner.

Pour rogner un côté, faites glisser une poignée de rognage de côté vers l’intérieur de l’image.

Pour rogner deux côtés opposés conjointement, appuyez et maintenez la touche Ctrl enfoncée et faites glisser une poignée de rognage de côté vers l’intérieur.

Pour rogner les quatre côtés de façon conjointe, appuyez et maintenez la touche Ctrl enfoncée pendant que vous faites glisser une poignée de rognage d’angle vers l’intérieur. Appuyez sur la touche Entrée pour valider les modifications.


Pour définir la taille et/ou la position du Dock, aussi appelée interface graphique, cliquez sur l’icône Préférences Système dans le Dock, puis sur l’icône Dock dans la fenêtre Préférences Système.

Définissez la taille du Dock avec le curseur Taille. Lorsque la case Agrandissement est cochée, vous pouvez définir l’amplitude de l’agrandissement lorsque le pointeur de la souris survole les icônes du Dock. Pour choisir la position du Dock, cochez une des trois cases à la suite du libellé Position. La liste Type de réduction définit l’effet utilisé pour réduire les fenêtres dans le Dock. Deux choix vous sont proposés : l’effet génie et l’effet d’échelle. Le deuxième est légèrement plus rapide que le premier. À vous de trouver celui qui convient le mieux à votre utilisation de l’ordinateur.

Les cases à cocher qui se trouvent dans la partie inférieure de la boîte de dialogue se comprennent d’elles-mêmes. À titre d’exemple, vous vous cocherez la case Animer les applications lors de leur ouverture pour faire sursauter l’icône des applications lors de leur ouverture. Ou encore, vous cocherez la case Masquer/afficher automatiquement le Dock pour gagner un peu de place en dissimulant le Dock lorsqu’il n’est pas utilisé.


Le menu Démarrer est redimensionnable. Pour activer cette option, cliquez sur Démarrer puis sur Paramètres. La boîte de dialogue Paramètres s’affiche. Cliquez sur Personnalisation pour afficher la boîte de dialogue Personnalisation. Basculez sur l’onglet Accueil et désactivez l’option Utiliser le menu Démarrer en plein écran :

Vous pouvez maintenant redimensionner le menu Démarrer en utilisant la souris.