Ici & Là

01 Société 02 Histoire 03 Science 04 Science fiction 05 SPIP 06 NTIC 07 Sondages 08 Divers
La meilleure façon de réaliser ses rêves est de se réveiller (Paul Valéry)

Accueil > SPIP > Navigation > Image Map : Tutoriels HTML > « Maps » sur l’image de la « Louve capitoline »

« Maps » sur l’image de la « Louve capitoline »

mardi 10 janvier 2017, par François Daniel Giezendanner

Notez cet article
0 vote

 Introduction

Exemples simples d’une « image map » avec 4 zones cliquables sur la statue de la Louve capitoline :

  1. Tête de la louve
  2. Remus
  3. Romulus
  4. La nourriture

 Exemple 1 : Aucun contour ne met en évidence les zones

Dans cet exemple les 4 zones sont définies avec des polygones, donc c’est l’instruction area shape="poly" qui est utilisée dans <area ...>.

 Le code à coller dans le champ texte de l’article est :

<center><img src="IMG/jpg/louve-01.jpg" alt="Louve capitoline" width="500" height="300" border="0" usemap="#louve"></center>
<center><map name="louve">
<area shape="poly" alt="Tete de la louve" coords="62,14,68,35,103,36,106,13,124,28,125,46,122,79,115,110,102,124,76,121,51,106,45,70,49,45,46,36,55,24" href="spip.php?article141#outil_sommaire_1" title="La sc&egrave;ne d&rsquo;une louve allaitant les jumeaux R&eacute;mus et Romulus est une m&eacute;taphore &agrave; forte &eacute;vocation au plan p&eacute;dagogique." />
<area shape="poly" alt="Remus" coords="254,201,263,191,274,187,283,193,286,203,289,209,293,211,299,213,293,204,290,200,287,193,291,186,298,188,302,194,303,198,315,216,316,225,306,229,296,226,297,258,318,263,335,277,338,281,341,278,341,271,348,270,352,281,351,291,348,297,341,296,326,289,318,286,312,279,294,281,289,279,285,274,280,275,278,275,283,282,283,287,277,291,267,294,264,290,266,283,254,276,245,266,244,259,253,251,259,249,261,241,262,237,258,242,251,246,245,239,249,224,254,214,257,211,255,205" href="http://icp.ge.ch/sem/cms-spip/spip.php?article708" title="Le Logiciel libre : un collaboratoire-comp&eacute;titoire plan&eacute;taire socio-constructiviste." />
<area shape="poly" alt="Romulus" coords="371,195,376,189,373,177,362,174,355,173,348,176,344,181,344,190,344,193,337,197,333,201,328,209,320,201,316,195,307,193,308,197,304,198,309,206,315,206,320,219,326,226,333,222,338,214,337,231,338,235,324,238,318,243,323,264,325,267,336,277,338,279,340,277,339,256,350,261,356,262,358,257,360,269,364,279,370,282,377,281,380,274,379,262,373,245,371,227,376,231,380,232,385,230,386,220,382,209,382,205,384,201,381,196,377,195,375,198,373,199" href="http://icp.ge.ch/sem/cms-spip/spip.php?article704" title="Les m&eacute;thodes actives au c&oelig;ur de nos pr&eacute;occupations." />
<area shape="poly" alt="Nourriture" coords="219,139,352,124,374,135,361,171,351,173,345,166,335,179,325,167,316,184,307,171,299,180,288,167,277,186,269,177,266,183,251,169,238,187,233,187,229,181,228,185,223,185,217,175,221,163,216,144" href="https://www.icem-pedagogie-freinet.org/node/3593" title="Diff&eacute;rence entre savoir et connaissance -&nbsp; &laquo;La comp&eacute;tence vient quand on a &laquo;dig&eacute;r&eacute; &raquo; des savoirs, afin qu&rsquo;ils se transforment en connaissances." />
</map></center>

 Le résultat est :

Louve capitoline
Tete de la louve Remus Romulus Nourriture

On se rend compte que rien n’attire le regard du visiteur sur l’image, rien ne le guide. Il va à la découverte selon son intuition ou sa fantaisie.

A ce stade il y a deux solutions pour guider l’utilisateur :


 Exemple 2 : Des contours mettent en évidence les zones

Dans cet exemple les 4 zones sont définies comme suit :

  • Tête de la louve : zone définie avec un cercle, donc dans <area ...> le code utilisé est shape="circle"
  • Mamelles de la louve : zone définie avec un rectangle, donc dans <area ...> le code utilisé est shape="rect"
  • Le jumeaux Remus et Romulus : zones définies chacun avec un polygone, donc dans <area ...> le code utilisé est shape="poly"

 Le code à coller dans le champ texte de l’article est :

<center><img src="IMG/jpg/louve-contours-02.jpg" alt="Louve capitoline" width="500" height="300" border="0" usemap="#louve-contours" /></center>
<center><map name="louve-contours">
<area shape="circle" alt="Tete de la louve" coords="85,68,57" href="spip.php?article141#outil_sommaire_1" title="La sc&egrave;ne d&rsquo;une louve allaitant les jumeaux R&eacute;mus et Romulus est une m&eacute;taphore &agrave; forte &eacute;vocation au plan p&eacute;dagogique." />
<area shape="rect" alt="Nourriture" coords="218,126,371,174" href="https://www.icem-pedagogie-freinet.org/node/3593" title="Diff&eacute;rence entre savoir et connaissance -&nbsp; &laquo;La comp&eacute;tence vient quand on a &laquo;dig&eacute;r&eacute; &raquo; des savoirs, afin qu&rsquo;ils se transforment en connaissances." />
<area shape="poly" alt="Remus" coords="254,204,258,194,268,188,281,190,286,196,287,207,293,211,296,211,293,203,288,193,292,185,302,190,306,205,317,220,316,226,307,229,296,228,297,257,310,259,339,280,341,275,342,269,349,271,353,280,352,292,347,299,329,292,315,284,309,281,290,280,285,276,279,276,284,285,278,292,267,295,264,283,245,267,245,259,256,252,261,249,261,240,255,247,248,246,246,237,252,221" href="http://icp.ge.ch/sem/cms-spip/spip.php?article708" title="Le Logiciel libre : un collaboratoire-comp&eacute;titoire plan&eacute;taire socio-constructiviste." />
<area shape="poly" alt="Romulus" coords="348,174,344,183,344,195,334,198,328,207,319,197,311,194,304,194,307,205,310,209,314,209,318,220,325,227,332,225,337,218,337,229,336,235,321,239,316,244,321,261,322,266,333,274,338,278,340,276,340,273,341,258,349,263,357,263,358,264,361,278,369,283,374,285,382,277,382,262,376,247,372,229,378,233,382,235,387,229,387,218,383,209,383,205,386,202,384,196,373,196,376,190,375,180,370,174" href="http://icp.ge.ch/sem/cms-spip/spip.php?article704" title="Les m&eacute;thodes actives au c&oelig;ur de nos pr&eacute;occupations." />
</map></center>

 Le résultat est :

Louve capitoline
Tete de la louve Nourriture Remus Romulus

 Exemple 3 : Des surfaces mettent en évidence les zones

Dans cet exemple les 4 zones sont définies avec des polygones, donc c’est l’instruction area shape="poly" qui est utilisée dans <area ...>.

 Le code à coller dans le champ texte de l’article est :

<center><img src="IMG/jpg/louve-surfaces-03.jpg" alt="Louve capitoline"  width="500" height="300" style="border-style:none" usemap="#louve-surfaces" /></center>
<center><map name="louve-surfaces">
<area shape="poly" alt="Tete de la louve" coords="65,14,71,35,101,36,103,21,110,13,123,25,126,37,123,47,123,71,119,95,106,114,95,122,79,124,58,115,47,96,44,77,44,58,47,49,45,39,47,32,56,21" href="spip.php?article141#outil_sommaire_1" title="La sc&egrave;ne d&rsquo;une louve allaitant les jumeaux R&eacute;mus et Romulus est une m&eacute;taphore &agrave; forte &eacute;vocation au plan p&eacute;dagogique." />
<area shape="poly" alt="Savoir, connaissances" coords="221,133,243,129,289,125,341,124,357,126,366,137,365,156,360,167,355,173,351,173,344,166,335,178,326,166,318,182,316,182,307,171,301,181,298,180,288,167,279,188,275,187,269,176,266,185,262,184,253,168,250,168,243,179,237,187,234,187,229,181,227,185,224,186,218,176,222,163,217,150,217,141" href="https://www.icem-pedagogie-freinet.org/node/3593" title="Diff&eacute;rence entre savoir et connaissance -&nbsp; &laquo;La comp&eacute;tence vient quand on a &laquo;dig&eacute;r&eacute; &raquo; des savoirs, afin qu&rsquo;ils se transforment en connaissances." />
<area shape="poly" alt="Remus" coords="268,188,259,194,254,200,255,208,255,212,250,222,245,237,246,244,249,246,254,246,260,242,261,238,260,245,259,250,251,251,244,258,244,265,253,274,261,281,263,282,262,288,263,294,268,295,276,292,283,288,283,283,278,278,275,273,277,274,281,277,284,275,285,273,287,279,297,281,309,281,312,280,317,286,325,289,334,293,341,297,342,298,348,299,351,294,353,285,352,278,350,272,346,270,341,271,340,276,339,281,331,274,320,266,311,261,299,259,296,258,296,244,294,226,304,229,312,228,316,224,316,217,302,200,302,191,293,185,290,185,290,189,291,193,292,197,290,194,288,193,288,197,289,201,293,205,299,213,297,213,287,209,286,198,284,193,277,189,273,187,270,188" href="http://icp.ge.ch/sem/cms-spip/spip.php?article708" title="Le Logiciel libre : un collaboratoire-comp&eacute;titoire plan&eacute;taire socio-constructiviste." />
<area shape="poly" alt="Romulus" coords="325,268,320,255,318,243,322,239,332,237,337,235,338,223,337,216,332,223,327,226,321,222,317,214,314,207,308,206,302,198,308,198,310,198,307,196,307,193,311,193,317,196,322,201,327,208,332,201,339,197,345,193,343,182,347,176,350,174,355,174,360,174,369,175,374,182,375,190,371,196,373,198,377,199,377,196,382,196,384,200,384,204,383,209,386,218,386,227,383,232,381,234,377,233,373,230,371,227,372,233,373,245,378,256,380,265,380,276,378,281,375,283,371,283,364,280,360,272,359,265,357,258,356,262,351,262,342,258,340,258,340,267,340,272,339,281,331,274,327,270" href="http://icp.ge.ch/sem/cms-spip/spip.php?article704" title="Les m&eacute;thodes actives au c&oelig;ur de nos pr&eacute;occupations." />
</map></center>

 Le résultat est :

Louve capitoline
Tete de la louve Savoir, connaissances Remus Romulus

 Quelques lectures sur les TIC & la pédagogie, le e-learning, etc.

... parmi bien d’autres mais certaines utilisées dans les images map

-* Des applications Web 2.0 au service de l’apprentissage