Afin d'améliorer l'aspect graphique de votre site ou bien alors de faire une blague, cliquer pour voir sur la pomme de l'affiche de ma page d'accueil:-), vous souhaitez que la navigation sur votre site se fasse grâce à une image qu'il ne vous reste plus qu'à découper. Malheureusement la plupart du temps le résultat est décevant car en plus pour le moment vous ne connaissez pas les tableaux:-((, donc encore une fois le HTML vient à la rescousse.

Un image map est une définition de liens sur une image en fonctin des coordonnées du clic de l'utilisateur. Pour définir ces coordonnées il vous faut un logiciel de retouche d'images, vous lui demandez les cordonnées des différents points qui définissent votre zone cliquable.
Pour un rectangle: coin haut, gauche et coin droit, droite.
Pour un cercle: coordonnées du centre et rayon
Pour un polygone: les coordonneés de tous les points (XY). Les coordonnées sont en pixels

Une fois cette première étape faite vous n'avez plus qu'à inclure dans votre page html votre image en ajoutant USEMAP, ce qui nous donne:
<IMG SRC="toto.gif" USEMAP="#totolien">

Ensuite, en général en bas de page, vous allez mettre la définition des liens de votre image. Pour ce faire nous allons écrire le code suivant:
<MAP NAME="totolien">
<AREA HREF="totojeune.html" SHAPE="polygon" COORDS="34,46,48,90,145,890"> ou encore poly
<!--Ici on a fait le cas d'un polygone (triangle)-->
<AREA HREF="totomaintenant.html" SHAPE="circle" COORDS="78,93,567">
<!--Ici on a défini un cercle-->
<AREA HREF="totovieu.html" SHAPE="rect" COORDS="56,89,178,120"> ou encore rectangle
<!--Et pour finir un rectangle-->
</MAP>

Vou aurez notez que le lien est tout comme dans la balise <A></A> dans un attribut HREF, donc que tous les autres attributs de la balise <A></A> sont applicables aux AREA en particulier ceux qui définissent le navigateur de destination du lien (TARGET="").