Membre de ClickFR, Reseau francophone Paie-Par-Click
Accueil
Accueil
- [ CSS : ] [ DHTML : ] [ HTML : ] [ JavaScript : ] [ Refs : ]
Accueil

HTML 4
Images - animations

  Intégration dans du texte

fonction  principe  les methodes  demonstrations  telechargement des methodes  Compatibilite du script... a partir de : 

  Fonction
Insérer une image dans une page HTML est des plus simples... <img src="image.gif"> mais l'intégrer au sein d'un texte pour améliorer votre présentation est moins évident. Nous allons donc voir toutes les possibilité qui nous sont offertes par le HTML.
  Principe
La balise d'insertion d'image (<img...>) peut, en plus des classiques attributs de source (src), et de tailles (width, height), intégrer un autre attribut spécifique à l'alignement de l'image par rapport à la ligne de texte où elle s'intègre : align.
  1. align="left" :
    • l'image est placée à l'extrême gauche de la ligne où la balise image est insérée, le texte coule le long de la droite de l'image et peut redémarrer le long de la marge de gauche lorsqu'il arrive 'sous' l'image.
  2. align="right" :
    • l'image est placée à l'extrême droite de la ligne où la balise image est insérée, le texte coule le long de la gauche de l'image et peut rejoindre le long de la marge de droite lorsqu'il arrive 'sous' l'image.
  3. align="middle" :
    • l'image est placée où la balise image est insérée, le texte se place de façon à ce que la base des caractères corresponde au milieu vertical de l'image. La suite du texte continue au-dessous de l'image.
  4. align="absmiddle" :
    • l'image est placée où la balise image est insérée, le texte se place de façon à ce que le milieu vertical des caractères corresponde au milieu vertical de l'image. La suite du texte continue au-dessous de l'image. (Internet Explorer uniquement)
  5. align="top" :
    • l'image est placée où la balise image est insérée, le texte se place de façon à ce que le sommet de l'image corresponde au sommet de l'élément le plus haut de la ligne (différent de "texttop"). La suite du texte continue au-dessous de l'image.
  6. align="texttop" :
    • l'image est placée où la balise image est insérée, le texte se place de façon à ce que le haut des caractères corresponde au sommet de l'image. La suite du texte continue au-dessous de l'image. (Internet Explorer uniquement)
  7. align="bottom" et align="baseline" :
    • l'image est placée où la balise image est insérée, le texte se place de façon à ce que la base des caractères (non-inclus les lettres à 'jambes') corresponde au bas de l'image. La suite du texte continue au-dessous de l'image.
  8. align="absbottom" :
    • l'image est placée où la balise image est insérée, le texte se place de façon à ce que le bas des caractères (inclus les lettres à 'jambes') corresponde au bas de l'image. La suite du texte continue au-dessous de l'image. (Internet Explorer uniquement)
  Méthodes
Alignement 'par défaut' :
<img src="image.gif" border="1">Petit texte uniquement destiné à mettre en valeur le placement d'une image au sein d'un texte...

1) Alignement 'à gauche intégré au texte' :
<img src="image.gif" border="1" align="left">Petit texte uniquement destiné à mettre en valeur le placement d'une image au sein d'un texte...

2) Alignement 'à droite intégré au texte' :
<img src="image.gif" border="1" align="right">Petit texte uniquement destiné à mettre en valeur le placement d'une image au sein d'un texte...

3) Alignement 'centré verticalement' :
<img src="image.gif" border="1" align="middle">Petit texte uniquement destiné à mettre en valeur le placement d'une image au sein d'un texte...

4) Alignement 'centré verticalement total' :
<img src="image.gif" border="1" align="absmiddle">Petit texte uniquement destiné à mettre en valeur le placement d'une image au sein d'un texte...

5) Alignement 'calé en haut total' :
<img src="image.gif" border="1" align="top">Petit texte uniquement destiné à mettre en valeur le placement d'une image au sein d'un texte...

6) Alignement 'calé en haut' :
<img src="image.gif" border="1" align="texttop">Petit texte uniquement destiné à mettre en valeur le placement d'une image au sein d'un texte...

7) Alignement 'calé en bas' :
<img src="image.gif" border="1" align="bottom"> et <img src="image.gif" border="1" align="baseline">Petit texte uniquement destiné à mettre en valeur le placement d'une image au sein d'un texte...

8) Alignement 'calé en bas total' :
<img src="image.gif" border="1" align="absbottom">Petit texte uniquement destiné à mettre en valeur le placement d'une image au sein d'un texte...

  Démonstrations
Alignement 'par défaut' :
pas d'alignementPetit texte uniquement destiné à mettre en valeur le placement d'une image au sein d'un texte. Petit texte uniquement destiné à mettre en valeur le placement d'une image au sein d'un texte.

1) Alignement 'à gauche intégré au texte' :
align='left'Petit texte uniquement destiné à mettre en valeur le placement d'une image au sein d'un texte. Petit texte uniquement destiné à mettre en valeur le placement d'une image au sein d'un texte. Petit texte uniquement destiné à mettre en valeur le placement d'une image au sein d'un texte. Petit texte uniquement destiné à mettre en valeur le placement d'une image au sein d'un texte. Petit texte uniquement destiné à mettre en valeur le placement d'une image au sein d'un texte.

2) Alignement 'à droite intégré au texte' :
align='right'Petit texte uniquement destiné à mettre en valeur le placement d'une image au sein d'un texte. Petit texte uniquement destiné à mettre en valeur le placement d'une image au sein d'un texte. Petit texte uniquement destiné à mettre en valeur le placement d'une image au sein d'un texte. Petit texte uniquement destiné à mettre en valeur le placement d'une image au sein d'un texte. Petit texte uniquement destiné à mettre en valeur le placement d'une image au sein d'un texte. Petit texte uniquement destiné à mettre en valeur le placement d'une image au sein d'un texte.

3) Alignement 'centré verticalement' :
align='middle'Petit texte uniquement destiné à mettre en valeur le placement d'une image au sein d'un texte. Petit texte uniquement destiné à mettre en valeur le placement d'une image au sein d'un texte.

4) Alignement 'centré verticalement total' :
align='absmiddle'Petit texte uniquement destiné à mettre en valeur le placement d'une image au sein d'un texte. Petit texte uniquement destiné à mettre en valeur le placement d'une image au sein d'un texte.

5) Alignement 'calé en haut total' :
align='top'Petit texte uniquement destiné à mettre en valeur le placement d'une image au sein d'un texte. Petit texte uniquement destiné à mettre en valeur le placement d'une image au sein d'un texte.

6) Alignement 'calé en haut' :
align='texttop'Petit texte uniquement destiné à mettre en valeur le placement d'une image au sein d'un texte. Petit texte uniquement destiné à mettre en valeur le placement d'une image au sein d'un texte.

7) Alignement 'calé en bas' :
align='bottom' et align='baseline'Petit texte uniquement destiné à mettre en valeur le placement d'une image au sein d'un texte. Petit texte uniquement destiné à mettre en valeur le placement d'une image au sein d'un texte.

8) Alignement 'calé en bas total' :
align='absbottom'Petit texte uniquement destiné à mettre en valeur le placement d'une image au sein d'un texte. Petit texte uniquement destiné à mettre en valeur le placement d'une image au sein d'un texte.
  Téléchargement
Les méthodes :
alignement_images.zip
3,9 Ko		 telechargez la table
Recherche
aide sur la recherche
CSS 2
DHTML
Javascript 1.3
Références
Aide générale
hit-parade
Votez TOP Ouaibe !

statistiques
aide sur les contacts aide sur la mailing-list aide sur la newsletter