3ème

Création et mise à jour de sites internet

Activité : Liens multiples sur une image

sommaire
Definitions
  • un exemple
  • syntaxe
  • exemples
  • se reperer sur l'image

    Qu'est ce que le mapage ?

    Le mapage est une extension du langage HTML qui permet à celui-ci de définir plusieurs zones liens hypermedia sur une même image."

    voici un exemple


    la syntaxe


    <HTML>
    <HEAD>
    <TITLE >Ici le titre général du site </TITLE>
    </HEAD>
    <BODY>
    le debut du corps
    ....
    jusqu'a présent c'est la structure classique d'une page. Avec les balises habituelles
    ....
    < IMG SRC="images/image1.gif" USEMAP="#toto" > on integre l'image ici avec la balise habituelle <IMG SRC> mais on ajoute une nouvelle option USEMAP a laquelle on attribue la valeur "#toto".
    Cela signifie que le "mapage" repéré par "toto" va agir sur l'image : image1.gif
    < MAP name="toto" > Balise de début du mapage nommée "toto" a l'aide de la balise <MAP> et de l'option Name="toto"
    <AREA SHAPE="RECT" COORDS=",289,127,384,297" HREF="lien1.htm" alt="lien1">
    <AREA SHAPE="CIRCLE" COORDS="190,206,50" HREF="lien2.htm" alt="lien2">
    <AREA SHAPE="POLY" COORDS="537,211,600,400,500,400" HREF="lien3.htm" alt="lien3">
    </MAP> fin du mapage nommée "toto"
    ....
    Autres commande du corps
    ....
    </BODY>
    </HTML>
    .

    Exemples

    voici un premier exemple obtenu avec un codage identique au codage précedent
    les fichiers lien1.htm et lien2.htm et lien3.htm et lien4.htm ont été codés par ailleurs. (afficher la source pour voir le codage)

    voici un second exemple qui utilise le multiframe obtenu avec le codage suivant pour la fenetre sommaire
    les fichiers lien1.htm et lien2.htm et lien3.htm ont été codés par ailleurs.
    voici le codage de la partie essai2.htm ( multifenetrage)


    comment se reperer sur une image ?

    /
  • exemple enregistrer l'image1.gif dans votre dossier de travail en cliquant sur le lien avec le bouton droit puis pointer sur enregistrer la cible.
  • une fois qu'elle est enregistrée , aller dans votre dossier de travail cliquer sur image1.gif avec le bouton droit puis pointer sur ouvrir avec choisir Paint (livré par défaut avec windows).
  • Vous voyez la fenetre suivante

    Ainsi la position du curseur est systèmatiquement indiquée en bas à droite dans la barre d'état.
  • il vous suffit donc d'ouvrir votre image avec Paint puis de passer de paint à la source de votre fichier html pour définir facilement les zones.