mardi 18 janvier 2011

Insertion d'image

Insertion d'image et changement des dimensions



  • Directement par un copié / collé depuis une image prise sur le web
  • C'est le cas de l'image suivante, trouvée via Google Image, puis une  fois affichée en taille réelle, elle a été copiée puis collée dans le message Blogspot.
  • ATTENTION :
    • Le collage est simple et sans autre action. C'est à dire :
      • pas de retouche de taille
      • pas de retouche d'alignement
      • pas d'essai de déplacement de l'image



Code html minimal pouvant être associé à l'insertion d'une image
  • <img src="emplacement/nom_image">
  • C'est le cas de l'image précédente, suite à un collage simple.

Code html général associé à l'insertion d'une image
  • <img src="emplacement/nom_image" param1="valeur1" param2="valeur2" ...>
  • Exemples de paramètres
    • title="Cliquer pour agrandir" .......... légende bulle associée à l'image
    • height="200"................ hauteur de l'image en pixels
    • width="400" ................ largeur de l'image en pixels
    • border="2" ................. bordure de l'image en pixels
    • align="left" ................... image positionnée à gauche du texte
  • Plus de détails ICI
Redimensionner l'image
  • Méthode 1 : Dans le message, sélectionner l'image insérée et agir sur les commandes de taille proposées
    • Cela a pour effet de rajouter les paramètres height="..." et width="..." dans le code HTML de l'image.
    • C'est le cas ci-dessous, l'image précédente a été demandée en mode "Petit"
  • Méthode 2 : après avoir inséré l'image par un simple copié/collé
    • Passer en "Modifier le code HTML",
    • Rajouter ou modifier le paramètre height=... ou width=...
    • SI UN SEUL des paramètres est mentionné, le deuxième est calculé automatiquement en fonction des proportions de l'image d'origine.
    • Si les deux paramètres sont mentionnés, il faut veiller à ce que les modifications des deux paramètres se fassent dans le respect des proportions d'origine, sans quoi l'image sera redimensionnée mais surtout déformée.
Alignement de l'image sans déplacement à la souris
  • Après un collage simple, on sélectionne l'image et on agit sur les commandes d'alignement proposées
    • Cela a pour effet d'encadrer l'image par la balise
      <div style="text-align: valeur;"> et </div>,
      ... avec valeur=left ou center ou right.
    • C'est le cas ci-dessous, l'image précédente a été demandée en mode "Centrée"

Autre technique de positionnement

  • Après un collage simple, on passe en mode HTML et
  • On rajoute le paramètre align="valeur" dans la balise < img src="..." > qui devient
    <img align="valeur" src="...">
  • C'est le cas ci-dessous, l'image précédente a été positionnée avec align="right"

Aucun commentaire: