Effets d'images

Mettre un lien url en image

Cet article a été mis à jour, vous consultez ici une archive de cet article!
Nous allons nous servir de mon gif pour cette courte démonstration. (Pour vous choisissez l'image voulue)



Voilà le code à mettre:



Code HTML :
<a 
 
href="http://easy-design.net/"><img  src="/upload/pookatoo_003_b505f.gif" 
 
/></a>  


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="/wiki/ ../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="/wiki/ ../logo.gif" align="left"  
 
vspace="30px">