Mettre un lien url en image
Nous allons nous servir de mon gif pour cette courte démonstration. (Pour vous choisissez l'image voulue)
*Passer la souris sur l'image...
C'est le titre de l'image. Cette option permet d'afficher un texte à la place de l'image quand elle n'a pas encore été chargée. Cela est très utile pour des images lourdes. Et sur le survole de l'image le "alt" apparait.
Ce sont la hauteur (height) et la largeur (width) de l'image en pixels. Cela permet la fluidité de l'affichage car le navigateur doit connaitre l'emplacement à réserver à l'image pour pouvoir continuer à afficher le texte.
Taille du cadre autour de l'image en pixels (par défaut 1). Cela permet de mettre en valeur des images quand elles sont dans un lien.
Alignement de l'image. prend les valeurs LEFT (gauche) , RIGHT (droite), MIDDLE (milieu), TOP (haut) et BOTTOM (bas), CENTER (centrer). On préfère utiliser cette balise pour centrer l'image verticalement ; pour centrer horizontalement, on encadre l'image par les balises
espace vertical et espace horizontal. permet de déterminer en pixels l'espace laissé libre autour de l'image.
- le texte sera aligné sur la gauche de l’image, le texte séparé de l’image dans le sens horizontal par 20 pixels.
- Le texte sera aligné sur la droite de l’image, séparé de l’image dans le sens vertical par 30 pixels.
Voilà le code à mettre:
Voilà le résultat:
*Passer la souris sur l'image...
Les options d'attribut de lien et de l'image en html :
ALT
C'est le titre de l'image. Cette option permet d'afficher un texte à la place de l'image quand elle n'a pas encore été chargée. Cela est très utile pour des images lourdes. Et sur le survole de l'image le "alt" apparait.
Code HTML :
<img src="/logo.gif" ALT="logo">
WIDTH et HEIGHT
Ce sont la hauteur (height) et la largeur (width) de l'image en pixels. Cela permet la fluidité de l'affichage car le navigateur doit connaitre l'emplacement à réserver à l'image pour pouvoir continuer à afficher le texte.
Code HTML :
<img src="/logo.gif" HEIGHT="65px" WIDTH="66px">
BORDER
Taille du cadre autour de l'image en pixels (par défaut 1). Cela permet de mettre en valeur des images quand elles sont dans un lien.
Code HTML :
<img src="/logo.gif" BORDER="0">
ALIGN
Alignement de l'image. prend les valeurs LEFT (gauche) , RIGHT (droite), MIDDLE (milieu), TOP (haut) et BOTTOM (bas), CENTER (centrer). On préfère utiliser cette balise pour centrer l'image verticalement ; pour centrer horizontalement, on encadre l'image par les balises
Code HTML :
<center><img src="/logo.gif" ALIGN="TOP"></center>
VSPACE - HSPACE
espace vertical et espace horizontal. permet de déterminer en pixels l'espace laissé libre autour de l'image.
- le texte sera aligné sur la gauche de l’image, le texte séparé de l’image dans le sens horizontal par 20 pixels.
Code HTML :
<img src="../logo.gif" align="right" hspace="20px">
- Le texte sera aligné sur la droite de l’image, séparé de l’image dans le sens vertical par 30 pixels.
Code HTML :
<img src="../logo.gif" align="left" vspace="30px">