Comment intégrer une image dans une page web


Les informations à donner en html

Pour insérer une image dans une page, le code html minimal est: 
<img src="dossier/nom-image.png">
L'image peut être au format .png .jpg ou .gif.

Je peux ajouter des informations pour préciser la taille (en px) :

Pour l'accessibilité (les aveugles), je dois normalement ajouter une description de l'image dans la partie alt="". Cette description est lue vocalement pour les aveugles et elle s'affiche quand le navigateur n'arrive pas à afficher l'image.

Exemple: 
<img src="dossier/nom-image.png" width="300" height="200" alt="contenu de mon image">
Rappel: ni accent ni espace dans le nom de l'image.

Comment positionner une image

Le positionnement se précise dans la partie CSS avec la création d'une class.

Ce que je veuxDans la partie CSS, je crée une classDans la partie html, j'écris:
Une image au centre 
.img-centre{
text-align:center;
} 
<p class="img-centre">
<img src="mon-image.png"></p>
Une image à gauche du texte 

.img-gauche{
float:left;
padding-right:5px;
} 
<p class="img-gauche">
<img src="mon-image.png"></p>
J'écris ce code avant le paragraphe de texte.
Une image à droite du texte 

.img-droite{
float:right;
padding-left:5px;
} 
<p class="img-droite">
<img src="mon-image.png"></p>
J'écris ce code avant le paragraphe de texte.
Je veux placer une petite vignette dans le texte 

.img-aligne{
vertical-align: middle;
padding-right:2px;
} 
<span class="img-centre">
<img src="mon-image.png">
</span>

Comment transformer une image en lien

Lien entre une vignette et une grande image

Cliquez sur l'image pour voir un exemple

Prévoir la même image dans deux formats: petit format (vign) et grand format(grande-image).
Dans la partie html, écrire:

<a href="nom de votre grande-image.png"><img src="nom de votre vign.png"> </a>

Lien entre deux pages web

Cliquez sur l'image:

Le code correspondant est:

<a href="http://noetomalalie.hypotheses.org/"><img src="images/vign5.png"> <a/>

Lien entre deux endroits d'une page

Pour plus de détails sur les liens et les ancres, voir la page sur les liens.

Créer une image cliquable

Créer une image cliquable avec des zones en forme de rectangle

Exemple de zones sélectionnées: salle d'audience d'un tribunal

Code html:


    <img src=" /  .png" width="..." height="..." alt=" " usemap="#nom" >
 
<map name="nom">
  <area shape="rectla zone cliquable est de forme rectangulaire" coords="...,...,...,...indiquer les coordonnées du point en haut à gauche et du point en bas à droite" href="....lien vers la page web" target="_blank"à mettre pour que la page s'ouvre dans une nouvelle fenêtre alt="titre de l'image" />
  <area shape="rect" coords=" , , , " href="  " alt="  " target="_blank" >
  <area shape="rect" coords=" , , , " href="  " alt=" " target="_blank" >
  <area shape="rect" coords=" , , , " href="  " alt=" " target="_blank" >
</map>

Pour récupérer rapidement les coordonnées d'une zone (area) rectangle, utiliser "zone" de Animas.


Pour récupérer le dossier zippé "zone" de Animas: dossier coordo-zone


Créer une image cliquable avec des zones en forme de cercle

Exemple de zones sélectionnées: visages dans un tableau (Le jugement de Salomon de Nicolas Poussin)

Code html:


    <img src=" /  .png" width="..." height="..." alt=" " usemap="#nom" >
 
<map name="nom">
  <area shape="circlela zone cliquable est de forme circulaire" coords="...,...,...indiquer les coordonnées du centre (abscisse et ordonnée) et le rayon du cercle" href="....lien vers la page web" target="_blank"à mettre pour que la page s'ouvre dans une nouvelle fenêtre alt="titre de l'image" />
  <area shape="circle" coords=" , , " href="  " alt="  " target="_blank" >
  <area shape="circle" coords=" , , " href="  " alt=" " target="_blank" >
  <area shape="circle" coords=" , , " href="  " alt=" " target="_blank" >
</map>

Créer une image cliquable avec des zones en forme de polygones

Exemple de zones sélectionnées: personnages dans un tableau (Ulysse et les sirènes de Waterhouse)

Code html: 

    <img src=" /  .png" width="..." height="..." alt=" " usemap="#nom" >
 
<map name="nom">
  <area shape="polyla zone cliquable est de forme polygonale" coords="...,...,...,...,...,...indiquer les coordonnées de chaque point du polygone et terminer en répétant les coordonnées du premier point" href="....lien vers la page web" target="_blank"à mettre pour que la page s'ouvre dans une nouvelle fenêtre alt="titre de l'image" />
  <area shape="poly" coords=" , , , , , " href="  " alt="  " target="_blank" >
  <area shape="poly" coords=" , , , , , " href="  " alt=" " target="_blank" >
  <area shape="poly" coords=" , , , , , " href="  " alt=" " target="_blank" >
</map>

Exemples d'images cliquables

Exemple d'image cliquable avec des liens externes

Passez la souris sur l'image et cliquez sur les zones actives pour afficher les liens (voir la rubrique "liens" pour plus de détails).

Presto Presto avatar patrice dalle cetim websourd interpretis IRIS

Exemple d'image cliquable avec affichage d'info-bulles

Passez la souris sur l'image pour afficher les explications en info-bulles (voir la rubrique "info-bulles" pour les codes).

Pour voir une autre façon d'afficher les infos bulles, allez sur cette page.
Non testé sur Internet Explorer.

Thésée arrivé en Crète rencontre Phèdre et Ariane, filles du Roi Minos. Thésée reçoit le fil d'Ariane. Thésée part combattre le minotaure. Thésée combat le Minotaure dans le labyrinthe et le tue. Il sort du labyrinthe grâce au fil d'Ariane. Le Minotaure, fils de la reine Pasiphaé et d'un taureau, est un être mi-homme, mi-taureau. Il se nourrit de chair humaine et dévaste la Crète. Phèdre et Ariane, filles du roi Minos, accueillent Thésée à son arrivée en Crète. Ariane donne du fil à Thésée pour qu'il puisse sortir du labyrinthe. Phèdre: soeur d'Ariane et fille du roi Minos. Ariane attend que Thésée ait combattu le Minotaure pour fuir avec lui. Phèdre Une fois le Minotaure tué, Thésée fuit avec Ariane et Phèdre. Le Minotaure est capturé pour être enfermé dans un labyrinthe. Le Minotaure vit enfermé dans un palais construit dans un labyrinthe. Il se nourrit de chair humaine. Le labyrinthe a été construit par l'architecte Dédale pour enfermer le Minotaure. Ce labyrinthe est tellement compliqué que personne ne peut trouver la sortie. Les jeunes Athéniens, Thésée, Ariane et Phèdre fuient sur leur bateau pour rentrer à Athènes. Les Athéniens devaient livrer chaque année pendant neuf ans: sept jeunes garçons et sept jeunes filles pour qu'ils soient offerts en nourriture au Minotaure. Thésée, fils du roi d'Atènes, demande à participer au voyage pour délivrer son peuple en tuant le Minotaure. Thésée est si heureux d'avoir réussi à tuer le Minotaure qu'il oublie la promesse faite à son père: changer la voile noire (signe de deuil et de malheur) en voile blanche pour annoncer qu'il est vivant. En voyant la voile noire au loin, Égée (père de Thésée et roi d'Athènes) croit que son fils a échoué et se suicide en se jetant dans la mer.

Code pour cette image (partie html):


<p><img src="images/minotaure.png" width="758" height="341" alt=" " usemap="#minotaure"></p>
    <map name="minotaure">
  <a class="bulle2" href="#/"><area shape="rect" coords="  ,  ,  ,  " >
     <span>Thésée arrivé en Crète rencontre Phèdre et Ariane, filles du Roi Minos. </span></a>
  <a class="bulle2" href="#/"><area shape="rect" coords=" ,150,207,309 " >
     <span>Thésée reçoit le fil d'Ariane.</span></a>
  <a class="bulle2" href="#/"><area shape="rect" coords=" 392,151,467,306 ">
    <span>Thésée part combattre le minotaure.</span></a>
  </map>

Créer une image cliquable avec explications en vidéo: Animas