img iciyatou img ici yatou img ici yatou img de iciyatou img de iciyatou img de iciyatou conactez moi!
  Bienvenue sur "iciyatou"...==>;
pour bien surfer sur "iciyatou"  

Bienvenue chez iciyatou ===>Exemples d'Images Mappées

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="c1.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

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; 2007-2008</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>
 
 
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="c5.gif" border=1 WIDTH=173 height=115>

</BODY>
</HTML>
 
 
<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="c7" WIDTH=250 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>
 
 
 
Pour bien diviser les zones ou parties de dessins qui se chevauchent, il faut d'abord indiquer la zone sur l e dessus (le triangle ou polygone) et par la suite définir la zone située en dessous (le cercle rouge).

 
Début du HTML   page d'accuille
© iciyatou

merci pour vous

Copyright "iciyatou©" 2007, tous droits réservés

Hébergé gratuitement par Kokoom
compteur gratuit pour blogs et pages web