Images: <image>

L'adresse de l'image

L'adresse de l'image - son url - est donnée par un des attributs docref, href, file, top-href ou rel-href déjà utilisés pour les liens hypertextes.

La plupart du temps l'image sera placée dans un des répertoires liés au projet (par exemple, le répertoire img). On y fera donc référence grâce à l'attribut file qui contiendra le nom du répertoire lié suivi du nom du fichier contenant l'image en question. Par exemple <image file="img/ibmm2.jpg"/> (remarquez que l'on utilise le caractère "/", ce qui est la règle dans le monde du web, plutôt que le caractère "\" utilisé dans le monde des PCs).

<image file="img/ibmm2.jpg"/>

Dans l'exemple précédent, le fichier image doit avoir été placé dans le répertoire lié img, et doit s'appeler ibmm2.jpg. Si ce n'est pas le cas, un message d'erreur apparaitra lors de la génération de votre site, et vous ne pourrez pas le publier tant que cette erreur ne sera pas corrigée.

L'avantage d'utiliser cet attribut file est que le système va prendre en charge la gestion de votre image: vérifier qu'elle existe, la recopier aux bons endroits (en prévisualisation, sur le site...), lui mettre les bons droits d'accès, etc.

Sinon, vous pouvez également utiliser tous les autres attributs d'un lien hypertexte: docref, href, top-href ou rel-href.

<image href="http://www.ulb.ac.be/ibmm/img/ibmm1.jpg/>

Position de l'image

Pour contrôler la position de l'image, on utilise un attribut position qui peut valoir gauche, droite, centre, gauche-texte et droite-texte.

On peut ainsi placer l'image à gauche (c'est la valeur par défaut), à droite, la centrer au milieu de la page, ou faire en sorte que l'image vienne se placer à gauche ou à droite au sein même du texte contenu dans la page.

Placer l'image à gauche, en dehors du texte

La valeur position="gauche" placera l'image à gauche (le texte ne viendra pas à sa droite, mais se placera en dessous).

<p>L'Institut de biologie et de médecine...</p>
<image file="img/ibmm2.jpg" position="gauche"/>
<p>L'IBMM est une illustration concrète et majeure de ...</p>

L'Institut de biologie et de médecine moléculaires (IBMM) est situé à Gosselies, près de Charleroi.

L'IBMM est une illustration concrète et majeure de l'ancrage wallon et des actions européennes et internationales de l'Université Libre de Bruxelles.

Cette valeur est la valeur par défaut (si vous ne mettez pas d'attribut position, l'image sera alignée à gauche).

Placer l'image à droite, en dehors du texte

La valeur position="droite" placera l'image à droite (le texte ne viendra pas à sa gauche, mais se placera en dessous).

<p>L'Institut de biologie et de médecine...</p>
<image file="img/ibmm2.jpg" position="droite"/>
<p>L'IBMM est une illustration concrète et majeure de ...</p>

L'Institut de biologie et de médecine moléculaires (IBMM) est situé à Gosselies, près de Charleroi.

L'IBMM est une illustration concrète et majeure de l'ancrage wallon et des actions européennes et internationales de l'Université Libre de Bruxelles.

Centrer l'image, en dehors du texte

La valeur position="centre" placera l'image au centre de la colonne où elle se trouve (le texte ne viendra pas à sa droite, ni à sa gauche, mais se placera en dessous).

<p>L'Institut de biologie et de médecine...</p>
<image file="img/ibmm2.jpg" position="centre"/>
<p>L'IBMM est une illustration concrète et majeure de ...</p>

L'Institut de biologie et de médecine moléculaires (IBMM) est situé à Gosselies, près de Charleroi.

L'IBMM est une illustration concrète et majeure de l'ancrage wallon et des actions européennes et internationales de l'Université Libre de Bruxelles.

Placer l'image à gauche, au sein du texte

La valeur position="gauche-texte" placera l'image à gauche et affichera le texte de la page à la droite de l'image (mais si le texte est plus long que la hauteur de l'image, le texte qui dépassera l'image reprendra sa place sur toute la largeur de la page).

<image file="img/ibmm2.jpg" position="gauche-texte"/>
<p>Chaque jour, des milliers de...</p>
<p>Le corps humain est composé de...</p>
<p>Qu'il s'agisse d'élaborer un...</p>

Chaque jour, des milliers de chercheurs contribuent à écrire le "dictionnaire génétique de l'humanité", augmentant par là même notre capacité à "lire", "corriger", "réécrire" les gènes des êtres vivants, qu'ils soient humains, animaux ou végétaux.

Le corps humain est composé de milliers de milliards de cellules qui peuvent en effet être victimes d'un dysfonctionnement, cause d'une maladie... Virus, bactéries, parasites font partie de notre environnement.

Qu'il s'agisse d'élaborer un vaccin ou un antibiotique, ou de comprendre la cause du cancer, du diabète ou de l'hypertension, la recherche biomédicale est essentielle. Tout comme le sont les modèles: dans les laboratoires, souris, rats ou levures sont utilisés pour mieux comprendre les processus cellulaires.

Si vous optez pour cette mise en page, vous devez prendre garde à ajouter un espacement suffisant autour de l'image pour éviter qu'elle ne soit collée au texte.

Si le texte que vous placez à droite de votre image est plus court que la hauteur de l'image elle-même, ou si vous désirez vous-même contrôler quelle est la partie du texte qui vient se placer à gauche et quelle est la partie qui vient se placer en dessous de l'image, vous pouvez placer l'image et la partie du texte désirée au sein d'un élément bloc, comme dans cet exemple:

<bloc>
   <image file="img/ibmm2.jpg" position="gauche-texte"/>
   <p>Chaque jour, des milliers de...</p>
</bloc>
<p>Le corps humain est composé de...</p>
<p>Qu'il s'agisse d'élaborer un...</p>

Chaque jour, des milliers de chercheurs contribuent à écrire le "dictionnaire génétique de l'humanité", augmentant par là même notre capacité à "lire", "corriger", "réécrire" les gènes des êtres vivants, qu'ils soient humains, animaux ou végétaux.

Le corps humain est composé de milliers de milliards de cellules qui peuvent en effet être victimes d'un dysfonctionnement, cause d'une maladie... Virus, bactéries, parasites font partie de notre environnement.

Qu'il s'agisse d'élaborer un vaccin ou un antibiotique, ou de comprendre la cause du cancer, du diabète ou de l'hypertension, la recherche biomédicale est essentielle. Tout comme le sont les modèles: dans les laboratoires, souris, rats ou levures sont utilisés pour mieux comprendre les processus cellulaires.

Placer l'image à droite, au sein du texte

La valeur position="droite-texte" placera l'image à droite et affichera le texte de la page à la gauche de l'image (mais si le texte est plus long que la hauteur de l'image, le texte qui dépassera l'image reprendra sa place sur toute la largeur de la page).

<image file="img/ibmm2.jpg" position="droite-texte"/>
<p>Chaque jour, des milliers de...</p>
<p>Le corps humain est composé de...</p>
<p>Qu'il s'agisse d'élaborer un...</p>

Chaque jour, des milliers de chercheurs contribuent à écrire le "dictionnaire génétique de l'humanité", augmentant par là même notre capacité à "lire", "corriger", "réécrire" les gènes des êtres vivants, qu'ils soient humains, animaux ou végétaux.

Le corps humain est composé de milliers de milliards de cellules qui peuvent en effet être victimes d'un dysfonctionnement, cause d'une maladie... Virus, bactéries, parasites font partie de notre environnement.

Qu'il s'agisse d'élaborer un vaccin ou un antibiotique, ou de comprendre la cause du cancer, du diabète ou de l'hypertension, la recherche biomédicale est essentielle. Tout comme le sont les modèles: dans les laboratoires, souris, rats ou levures sont utilisés pour mieux comprendre les processus cellulaires.

Si vous optez pour cette mise en page, vous devez prendre garde à ajouter un espacement suffisant autour de l'image pour éviter qu'elle ne soit collée au texte.

Si le texte que vous placez à gauche de votre image est plus court que la hauteur de l'image elle-même, ou si vous désirez vous-même contrôler quelle est la partie du texte qui vient se placer à droite et quelle est la partie qui vient se placer en dessous de l'image, vous pouvez placer l'image et la partie du texte désirée au sein d'un élément bloc, comme dans cet exemple:

<bloc>
   <image file="img/ibmm2.jpg" position="droite-texte"/>
   <p>Chaque jour, des milliers de...</p>
</bloc>
<p>Le corps humain est composé de...</p>
<p>Qu'il s'agisse d'élaborer un...</p>

Chaque jour, des milliers de chercheurs contribuent à écrire le "dictionnaire génétique de l'humanité", augmentant par là même notre capacité à "lire", "corriger", "réécrire" les gènes des êtres vivants, qu'ils soient humains, animaux ou végétaux.

Le corps humain est composé de milliers de milliards de cellules qui peuvent en effet être victimes d'un dysfonctionnement, cause d'une maladie... Virus, bactéries, parasites font partie de notre environnement.

Qu'il s'agisse d'élaborer un vaccin ou un antibiotique, ou de comprendre la cause du cancer, du diabète ou de l'hypertension, la recherche biomédicale est essentielle. Tout comme le sont les modèles: dans les laboratoires, souris, rats ou levures sont utilisés pour mieux comprendre les processus cellulaires.

Régler l'espacement autour de l'image

Vous pouvez contrôler l'espacement (les zones vides) entre l'image et le reste de la page à l'aide des attributs suivants: espace-haut, espace-bas, espace-gauche et espace-droit. La valeur à donner à ces attributs sera le nombre de "pixels" à reserver pour cet espacement (un pixel est le plus petit point que peut afficher votre écran). Une valeur comprise entre 4 et 20 sera largement suffisante.

Si vous ne le faites pas, un espacement par défaut sera utilisé (si vous ne voulez pas d'espacement, il faudra donc utiliser ces attributs avec la valeur 0).

Voici un exemple avec un espacement égal à 2 à gauche:

<image file="img/ibmm2.jpg" position="droite-texte" espace-gauche="2"/>
<p>Chaque jour, des milliers de...</p>
<p>Le corps humain est composé de...</p>
<p>Qu'il s'agisse d'élaborer un...</p>

Chaque jour, des milliers de chercheurs contribuent à écrire le "dictionnaire génétique de l'humanité", augmentant par là même notre capacité à "lire", "corriger", "réécrire" les gènes des êtres vivants, qu'ils soient humains, animaux ou végétaux.

Le corps humain est composé de milliers de milliards de cellules qui peuvent en effet être victimes d'un dysfonctionnement, cause d'une maladie... Virus, bactéries, parasites font partie de notre environnement.

Qu'il s'agisse d'élaborer un vaccin ou un antibiotique, ou de comprendre la cause du cancer, du diabète ou de l'hypertension, la recherche biomédicale est essentielle. Tout comme le sont les modèles: dans les laboratoires, souris, rats ou levures sont utilisés pour mieux comprendre les processus cellulaires.

Voici le même exemple, mais avec un espacement égal à 40 à gauche:

<image file="img/ibmm2.jpg" position="droite-texte" espace-gauche="40"/>
<p>Chaque jour, des milliers de...</p>
<p>Le corps humain est composé de...</p>
<p>Qu'il s'agisse d'élaborer un...</p>

Chaque jour, des milliers de chercheurs contribuent à écrire le "dictionnaire génétique de l'humanité", augmentant par là même notre capacité à "lire", "corriger", "réécrire" les gènes des êtres vivants, qu'ils soient humains, animaux ou végétaux.

Le corps humain est composé de milliers de milliards de cellules qui peuvent en effet être victimes d'un dysfonctionnement, cause d'une maladie... Virus, bactéries, parasites font partie de notre environnement.

Qu'il s'agisse d'élaborer un vaccin ou un antibiotique, ou de comprendre la cause du cancer, du diabète ou de l'hypertension, la recherche biomédicale est essentielle. Tout comme le sont les modèles: dans les laboratoires, souris, rats ou levures sont utilisés pour mieux comprendre les processus cellulaires.

Ajout d'une légende et du crédit photographique

On peut ajouter une légende à une image à l'aide d'un élément <légende> à placer dans l'élément <image>. La légende viendra se placer en dessous de l'image dans la page générée.

On peut également ajouter le nom de l'auteur de l'image à l'aide d'un élément <crédit>. Ce crédit ne sera visible que si l'image possède une version en haute définition (voir plus bas).

<image file="img/ibmm2.jpg" position="gauche-texte">
     <légende>L'Institut de biologie et de médecine...</légende>
     <crédit>Jean Photomaton</crédit>
  </image>
  <p>L'IBMM est une illustration concrète et majeure de...</p>
  <p>90% du génome humain est actuellement déchiffré...</p>
</zones>

L'Institut de biologie et de médecine moléculaires (IBMM), implanté sur l'aéropole à Gosselies

L'IBMM est une illustration concrète et majeure de l'ancrage wallon et des actions européennes et internationales de l'Université Libre de Bruxelles.

90% du génome humain est actuellement déchiffré. Chaque jour, des milliers de chercheurs contribuent à écrire le "dictionnaire génétique de l'humanité", augmentant par là même notre capacité à "lire", "corriger", "réécrire" les gènes des êtres vivants, qu'ils soient humains, animaux ou végétaux. Et à repousser un peu plus loin les frontières de la maladie...

Version haute définition d'une image

On utilise souvent sur un site web une petite image qui permet, en cliquant dessus, de faire apparaître une autre image plus grande et de meilleure qualité.

A l'ULB, rien de plus simple; il suffit de placer un élément <grande-image> au sein de l'élément <image>. Cet élément, comme pour l'élément <image>, doit possèder un docref, href, file, top-href ou rel-href qui indique l'adresse de l'image en haute définition. C'est généralement file qui est utilisé (l'image étant placée dans un des répertoires liés à votre projet).

<image file="img/ibmm-small.jpg">
   <légende>L'Institut de biologie et de médecine...</légende>
   <grande-image file="img/ibmm-large.jpg"/>
</image>

Ce qui donne (cliquez sur l'image pour voir le résultat):

L'Institut de biologie et de médecine moléculaires (IBMM), implanté sur l'aéropole à Gosselies

Comme vous pouvez le voir dans l'exemple précédent, la légende écrite sous la petite image est reproduite également sous la grande image. Mais vous pouvez également ne mettre une légende que sous la grande image, comme dans l'exemple suivant:

<image file="img/ibmm-small.jpg">
   <grande-image file="img/ibmm-large.jpg">
      <légende>L'Institut de biologie et de médecine...</légende>
   </grande-image>
</image>

Ce qui donne (cliquez sur l'image pour voir le résultat):

Vous pouvez également mettre des légendes différentes sous la petite image et sous la grande image, comme dans l'exemple suivant (remarquez également le nom du photographe qui apparaitra sous la grande image):

<image file="img/ibmm-small.jpg">
   <légende>L'IBMM à Gosselies.</légende>
   <grande-image file="img/ibmm-large.jpg">
      <légende>L'Institut de biologie et de médecine...</légende>
      <crédit>Jean Photomaton</crédit>
   </grande-image>
</image>

Ce qui donne (cliquez sur l'image pour voir le résultat):

L'IBMM à Gosselies.

Images cliquables

Pour rendre une image cliquable au même titre qu'un lien hypertexte, il suffit d'insérer un élément <lien> à l'intérieur de l'élément <image>. Cet élément doit possèder un attribut hypertexte pour indiquer la page qu'il faudra afficher lorsque l'utilisateur cliquera sur l'image.

<image file="img/ibmm2.jpg">
   <lien href="http://www.ulb.ac.be/ibmm"/>
</image>

Remarques:

Images à zones cliquables

Comme en html, on peut rendre certaines zones d'une image "cliquables" (des liens hypertextes sont associés à ces zones, que l'utilisateur peut utiliser pour naviguer sur un site).

Cela se réalise grâce à un élément <map> à placer au sein de l'élément <image>. Cet élément contient, comme en html, des éléments <area> qui servent à définir les zones cliquables dans l'image, grâce à un attribut shape qui définit le type de zone (rect, circle...), ainsi qu'un attribut coords qui définit la position et la taille de la zone.

Pour une zone rectangulaire, shape doit être égal à rect ou à rectangle, et coords contient la position (X et Y) du point supérieur gauche de la zone, suivie de la position (X et Y) du coin inférieur droit de la zone. Ces coordonnées se donnent en pixels, séparées par des virgules.

Pour une zone circulaire, shape doit être égal à circ ou à circle, et coords contient la position (X et Y) du centre du cercle, suivie du rayon du cercle représentant la zone cliquable. Ces coordonnées se donnent en pixels, séparées par des virgules.

Des zones polygonales plus complexes, peuvent être utilisée si shape est égal à poly ou à polygon. Dans ce cas, coords contient une liste de points (X et Y) constituant le polygone en question.

Chaque zone doit possèder un attribut hypertexte pour donner l'adresse à associer au lien hypertexte (docref, href, file, top-href ou rel-href).

<image file="img/image-area.jpg" position="centre">
   <map>
     <area shape="rect" coords="7,10,82,37" docref="..."/>
     <area shape="rect" coords="107,31,179,84" docref="..."/>
     <area shape="circle" coords="60,80,28" docref="..."/>
   </map>
</image>

Ce qui donne (les zones vont toutes renvoyer vers la page sommaire de ce document):

Utilisation d'une image dans une présentation ou dans une galerie

Les images peuvent facilement s'insérer dans un élément <présentation> qui va présenter les images en boucle (comme un slideshow) ou dans un élément <galerie> qui va présenter les images les unes à coté des autres (comme une galerie d'images).

Exemple de ce qu'on peut obtenir avec une <présentation>.

Exemple de ce qu'on peut obtenir avec une <galerie>.