Image Map

Image Map

     C'est une image dont des portions sont utilisées comme support de liens, on a donc plusieurs liens différends sur la même image.
    L'image ci-dessous supporte trois liens, le rectangle olive la page précédente du tutorial, le rond vert la page présente, l'étoile la suivante. Le fond jaune n'est affecté d'aucun lien. Vous pouvez voir en passant le curseur sur l'image, celui-ci se changer en main au-dessus des zones sensibles.

2. Structure générale

    Une image map, (carte), est définit par la structure,
        <map name="nom de la map">
            <area href="Lien" shape="Type" coords="points">
            <autres aires>
        </map>
        <img src="nom de l'image" usemap="#nom de la map" dimensions>
       A l'intérieur du tag <map> on trouve le nom de la carte et la définition des aires porteuses des liens, (area).
        Ensuite la définition de l'image, syntaxe classique, le lien avec la carte est donné par son nom. Ce nom est précédé par # car considéré comme un ancrage dans la page.

3. Définition des aires

    Les aires sont définis par le mot clé area, la définition du lien par le href, la forme de l'aire, (rectangle, cercle, polygone), et les points définissant la position.
    Rectangle,
        shape="rect"
        La position est donnée par les coordonnées en x,y du coin supérieur gauche et du coin inférieur droit. Ces coordonnées sont prise par rapport au coin supérieur gauche de l'image, pas par rapport à l'écran. Les mesures suivantes sont données en pixels
        Le rectangle olive de l'image précédente mesure 45 sur 100, son coin supérieur gauche est à x=0, y=0, (origine des coordonnées) et son coin inférieur droit est à x=45, y=100.

0,0
                                   --------------------------> x
:
:
:
:
\/
y
L'axe des Y est inversé par rapport à l'habituel.

        Donc la syntaxe du rectangle olive de l'image précédente est
         <area href="Html5.htm" shape="rect" coords="0, 0, 45, 100">

    Cercle
        Mot clé circle.
        Coordonnées, celle du centre en x,y et le rayon du cercle.
        Le rond vert a un centre à x=90, y=50, son rayon est de 40.
        Sa syntaxe sera.
        <area href="Html6.htm" shape="circle" coords="90, 50, 40">

        Polygone
            Mot clé polygon.
            Coordonnées, c'est une liste de points en x,y, ces points sont joint dans l'ordre d'écriture et définissent une surface. Dès que cette surface devient un peu complexe, il semble difficile de les coder à la main. La plupart des éditeurs html ont des possibilités de dessin de ces formes.
    Syntaxe complète,

4. Applications

Créer une barre de navigation,

    Nom de l'image "images/cailloux.jpg",
    nom de la carte "FPMap2" ou le nom que vous voulez,
    dimension de la barre, 300 x 50,
     flêche à gauche, 50 x 50, lien Html5.htm
    Logo Cailloux, 180 x 50, position centrale, lien Html00.htm
   flêche à droite, 50 x 50, lien Html7.htm
    Vous pouvez mettre un texte alternatif dans les images, (Précédent, Sommaire, Suivant), mais il n'apparaîtra pas forcément sous Netscape 4.
    Vous pouvez dessiner un graphique pour vous aider, tel que, (y est toujours à 0 ou 50),

Corrigé

Voici une carte de navigation pour la boutique en ligne Sorcellerie&Co. On peut trouver sur ce site sur des pages séparées, des vêtements, (Vetures.htm), des balais, (Balai.htm), des chaudrons de sorciéres, (Chaudron.htm), des âmes damnées, (Fantomes.htm), la page d'accueil est Atre.htm, (Ces pages n'existent pas dans le tutorial),

Voici une découpe possible des aires sensibles,

Carte des aires
<map name="SorcelCo">
    <area href="Vetures.htm" shape="rect" coords="0, 0, 80, 80" alt="Seyantes vêtures">
    <area href="Chaudron.htm" shape="circle" coords="97, 118, 40" alt="Pots à feu">
    <area href="Balai.htm" shape="rect" coords="118, 0, 200, 74" alt="Véloces brosses">
    <area href="Fantomes.htm" shape="rect" coords="0, 153, 73, 199" alt="Ames neuves et d'occasions">
    <area href="Atre.htm" shape="rect" coords="138, 117, 200, 200" alt="Garanties infernales et modes de payement">
</map>
    <img border="0" src="images/SorceletCo.jpg" usemap="#SorcelCo" width="200" height="200">

    Exercice, dans la forme ci-dessus,
        Cette image étant un peu petite, nous allons doubler ses dimensions, (400 x 400), nous perdrons un peu de définition,
        Réajuster les dimensions des aires sensibles, (faire un copier/coller et doubler les dimensions),
     Corrigé

	Sommaire
Précédent		Suivant