Les Balises du HTML - 9b

Exemples d'Images Mappées

1 - Image réactive avec liens internes
<HTML>
<HEAD>
<TITLE>Exemple d'image réactive - 1</TITLE>
</HEAD>
<BODY BGCOLOR="white" TEXT="black" LINK="blue" VLINK="purple">
<A NAME="Début"></A>
<H3 align="center">Faites votre sélection ci-dessous</H3>
<CENTER>
<IMG SRC="map_1.gif" WIDTH=300 HEIGHT=100 BORDER=0 USEMAP="#Menu">
</CENTER>

<MAP NAME="Menu">
<AREA SHAPE="CIRCLE" COORDS="50,50,40" HREF = "#Cible_1">
<AREA SHAPE="RECT" COORDS="130,10,170,90" HREF = "#Cible_2">
<AREA SHAPE="POLY" COORDS="210,90,250,10,290,90" HREF = "#Cible_3">
</MAP>
<P>&nbsp;
<P>&nbsp;

 

 
<A NAME="Cible_1">
<CENTER><IMG SRC="sel_circ.gif"></CENTER>
<P>&nbsp;
<P>&nbsp;
<BR>
<A HREF="#Début">Retour au début de cette page</A>
<P>&nbsp;
<P>&nbsp;

 

 

 

 

 
<A NAME="Cible_2">
<CENTER><IMG SRC="sel_rect.gif"></CENTER>
<P>&nbsp;
<P>&nbsp;
<BR>&nbsp;
<A HREF="#Début">Retour au début de cette page</A>
<P>&nbsp;
<P>&nbsp;

 

 

 

 

 
<A NAME="Cible_3">
<CENTER><IMG SRC="sel_tri.gif"></CENTER>
<P>&nbsp;
<P>&nbsp;
<BR>&nbsp;
<A HREF="#Début">Retour au début de cette page</A>
</BODY>
</HTML>


Apparence au départ


Apparence - Sélection du cercle


Apparence - Sélection du rectangle


Apparence - Sélection du triangle
Visualiser dans votre navigateur. (Fermer la nouvelle fenêtre pour revenir ici.)
2 - Image réactive avec liens externes - Fichiers multiples
<HTML>
<HEAD>
<TITLE>Exemple d'image réactive - 2</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="black" >
<A NAME="Début"></A>
<H3 align="center">Faites votre choix ci-dessous</H3>
<CENTER>
<IMG SRC="map_2.gif" WIDTH=290 HEIGHT=120 BORDER=2 USEMAP=#map>
<P><B>&copy; 2000-2003</B>
</CENTER>
<MAP NAME="map">
<AREA href="index.htm" SHAPE="rect" coords="10,10,280,40">
<AREA href="intro.htm" SHAPE="rect" coords="10,50,70,110">
<AREA href="bases.htm" SHAPE="circle" coords="110,80,30" >
<AREA href="liens.htm" SHAPE="poly" coords="150,70,180,70,
180,50, 210,80,180,110,180,90,150,90">
<AREA href="table.htm" SHAPE="rect" coords="220,50,280,110">
</MAP>
</BODY>
</HTML>
 
  Visualiser le contenu des 5 autres fichiers requis
Visualiser dans votre navigateur. (Fermer la nouvelle fenêtre pour revenir ici.)
3 - Image réactive avec liens externes - Fichier simple
<HTML>
<HEAD>
<TITLE>Exemple d'image réactive - 3</TITLE>
</HEAD>
<BODY BGCOLOR="white" TEXT="black" LINK="blue" ALINK="red" >
<CENTER>
<TABLE BORDER=6 WIDTH="70%"><TR ALIGN="center">
<TD BGCOLOR="#000080"><FONT SIZE=+2 COLOR="white">
<B>Les Images cliquables</B>
</FONT></TD></TR></TABLE></CENTER><BR><BR>

<MAP NAME="Menu">
<AREA SHAPE="circle" COORDS="29,32,28" HREF="map_ex3b.htm#Cercle">
<AREA SHAPE="rect" COORDS="38,76,171,114" HREF="map_ex3b.htm#Rect">
<AREA SHAPE="poly" COORDS="109,1,161,6,137,61,131,43,92,67,76,33,121,15"
href="map_ex3b.htm#Fleche">
</MAP>

<P ALIGN="center">
<IMG USEMAP="#Menu" SRC="map_3.gif" border=1 WIDTH=173 height=115>

</BODY>
</HTML>
 
  Visualiser le contenu de l'autre fichier requis
Visualiser dans votre navigateur. (Fermer la nouvelle fenêtre pour revenir ici.)
4 - Image réactive avec zones superposées
<HTML>
<HEAD>
<TITLE>Exemple d'image réactive - 4</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="black" >
<CENTER>
<FONT SIZE="3"><B>Image réactive avec zones superposées</B></FONT>
<IMG SRC="map_4.gif" WIDTH=300 BORDER=2 USEMAP=#Face>
</CENTER>
<BR CLEAR="all">
<MAP NAME="Face">
<AREA SHAPE="rect" HREF="ex4_pg1.htm" COORDS="140,19,280,59">
<AREA SHAPE="poly" HREF="ex4_pg2.htm" COORDS="81,99,220,88,200,148">
<AREA SHAPE="circle" HREF="ex4_pg3.htm" COORDS="80,99,60">
</MAP>
</BODY>
</HTML>
 
 
  Visualiser le contenu des 3 autres fichiers requis
Visualiser dans votre navigateur. (Fermer la nouvelle fenêtre pour revenir ici.)
<AREA SHAPE="rect" HREF="ex4_pg1.htm" COORDS="140,19,280,59">
<AREA SHAPE="poly" HREF="ex4_pg2.htm" COORDS="81,99,220,88,200,148">
<AREA SHAPE="circle" HREF="ex4_pg3.htm" COORDS="80,99,60"> 		Pour bien diviser les zones ou parties de dessins qui se chevauchent, il faut d'abord indiquer la zone sur le dessus (le triangle ou polygone) et par la suite définir la zone située en dessous (le cercle rouge).
Autres exemples de l'utilisation des Maps  
 
Début du HTML-9   Notes sur les Images réactives
© Pierre van der Knaap
Menu du HTML   Menu du HTML