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 jQuery « MapHilight » > « Image Map » JQuery MapHilight (zones illuminées au survol de la souris) de (...)

« Image Map » JQuery MapHilight (zones illuminées au survol de la souris) de David Lynch appliqué à l’image « Louve Capitoline » dans SPIP

Application de l’exemple maphilight « simple demo » à l’image « Louve Capitoline »

jeudi 12 janvier 2017, par François Daniel Giezendanner

Notez cet article
4 votes

 Préambule

En standard dans le squelette de SPIP 3.1 la largeur maximale des images est fixée à 672 pixel, en particulier dans le fichier article.html, lorsque cette largeur est plus grande elle est réduite à 672 pixels avec l’utilisation du filtre |image_reduire. Pour plus d’informations on consultera l’article Réduire la dimension des images avec le filtre |image_reduirelargeur,hauteur.

L’exemple maphilight « simple demo » appliqué ici à l’image « Louve Capitoline » est totalement opérationnel sur grand écran avec une souris. Ce n’est pas le cas avec l’utilisation des tablettes (Ipad, etc.) et smartphones (Iphone, etc.).

 Introduction

JQuery maphilight (Map Hilight) est le script jquery créé par David Lynch. Ce script permet aux rédacteurs d’associer des zones de clic aux images. De plus, fait important, ce script permet de changer les couleurs, transparences, épaisseurs de traits et d’ajouter une ombre paramétrée pour les zones cliquables au survol de la souris, tout cela sans nécessiter la connaissance de javascript / jquery.

Dans cet article nous appliquons le code de l’exemple maphilight « simple demo » à l’image « Louve Capitoline ».

 Fonctionnalités

  • Fournit des graphiques interactifs simples via des cartes d’image HTML (pas besoin de flash).
  • Facile à utiliser : choisissez le paramètre par défaut ’mettre en évidence toutes les images’ ou ajoutez simplement class = "jq_maphilight" à la balise <img> d’une carte d’image spécifique que vous souhaitez mettre en surbrillance.
  • Entièrement configurable : options pour le remplissage, la couleur de remplissage, l’opacité de remplissage, le contour, la couleur du contour, l’opacité du contour, l’épaisseur du contour, un effet de fondu et l’ajout d’une ombre paramétrée.

 Application de l’exemple maphilight « simple demo » à l’image « Louve Capitoline »

jQuery maphilight documentation

Link Link Link Link Link

L’attribution des couleurs de trait et de fond, épaisseur de trait et opacité des zones réactives sont attribuées à chaque zone dans sa balise <area ... /> avec une instruction du type :
data-maphilight='{"strokeColor":"ff00ff","strokeWidth":2,"fillColor":"ff0000","fillOpacity":0.2}'

La documentation du plugin maphilight et présentée dans l’article « jQuery maphilight documentation », lequel propose quatre exemples d’utilisation du plugin. Ici nous appliquons le code de l’exemple « The simple demo (with awful art, and examples of data attributes) » à l’image « Louve Capitoline ».

 Précisions concernant les attributs utilisés dans les Balises <area />

Nous avons choisis de définir cinq zones réactives :
1) La tête de la louve
2) Les mamelles de la louve
3) L’enfant Rémus
4) L’enfant Romulus
5) L’ensemble de l’image sauf les zones 1) à 4) définies ci-dessus.

Les 7 attributs utilisés ici pour définir les zones réactives 1 à 4 des balises <area /> sont les suivants :

<area

  1. shape="poly" : Déclare que la zone réactive a une forme polygonale.
  2. alt="Link" : Affiche le texte alternatif « Link » lorsque l’image ne s’affiche pas.
  3. coords="221,133,243,129,289,125,341,124,..." : Liste des coordonnées x,y des points définissant le polygone séparées par des virgules.
  4. href="https://www.icem-pedagogie-freinet.org/node/3593" : Adresse de destination (URL) pour une page externe au site. Pour une page interne au site SPIP on écrira par exemple href="spip.php?article141#outil_sommaire_1", on atteint ainsi l’article 141 positionné à l’ancre « #outil_sommaire_1 ».
  5. target="_blank" : Ouvre le lien (page cible) dans une nouvelle fenêtre sans nom.
  6. data-maphilight='{"strokeColor":"00ff00","strokeWidth":2,"fillColor":"0000ff","fillOpacity":0.2}' : Attribution des couleurs de trait et de fond, épaisseur de trait, opacité, etc. des zones réactives.
  7. title="Bla, bla, bla ..." : Texte de l’infobulle lors du survol de l’image par le curseur.
    />

Les attributs sont définis de la même manière pour la zone réactive 5) sauf pour les attributs shape et coords qui sont définis comme suit :

shape="rect" : Déclare que la zone réactive a une forme rectangulaire.
coords="1,1,499,299" : cordonnées x1,y1,x2,y2 des coins haut-gauche et bas-droite du rectangle. Cette zone réactive rectangulaire couvre l’ensemble de l’image sauf les zones 1) à 4) définies ci-dessus.

Remarque :
Pour couvrir l’ensemble de l’image, il est également possible, en lieu et place de shape="rect", de définir l’attribut shape comme suit :

shape="default" : là aussi la zone ainsi définie couvre l’ensemble de l’image sauf les zones 1) à 4) définies ci-dessus. L’attribut coords n’a pas a être définit.

L’inconvénient de cette démarche c’est que l’attribut shape="default" n’est pas pris en compte par le plugin maphilight, ainsi lorsque cette zone est survolée par la souris elle ne présente alors aucun changement de couleur du trait et du fond, épaisseur du trait et opacité du fond, seul le curseur change de forme au survol de la zone.

 Réglage des paramètres de maphilight

(Pour plus de détails on consultera : jQuery maphilight documentation)

Paramètres utilisés dans l’exemple

Dans l’exemple ci-dessus, pour chaque zone réactive nous avons utilisé une instruction du type :
data-maphilight='{"strokeColor":"00ff00","strokeWidth":2,"fillColor":"0000ff","fillOpacity":0.2}'

Soit les 4 paramètres suivants de maphilight : strokeColor, strokeWidth, fillColor et fillOpacity.

En fait vous disposez des 20 paramètres décrits ci-dessous :

$.maphilight.defaults

Les valeurs par défaut pour toutes les utilisations de maphilight peuvent être définies ici. Si vous le remplacez manuellement, vous devez spécifier toutes les options.

$.fn.maphilight.defaults = {
        fill: true,
        fillColor: '000000',
        fillOpacity: 0.2,
        stroke: true,
        strokeColor: 'ff0000',
        strokeOpacity: 1,
        strokeWidth: 1,
        fade: true,
        alwaysOn: false,
        neverOn: false,
        groupBy: false,
        wrapClass: true,
        shadow: false,
        shadowX: 0,
        shadowY: 0,
        shadowRadius: 6,
        shadowColor: '000000',
        shadowOpacity: 0.8,
        shadowPosition: 'outside',
        shadowFrom: false
}

Description générale des options

NoParamètresType – Val DéfautExplications
1 fill (Boolean. Par défaut : true) Pour remplir la forme
2 fillColor (String. Par défaut : ’000000’) La couleur pour remplir la forme avec
3 fillOpacity (Number. Default : 0.2) L’opacité du remplissage (0 = entièrement transparent, 1 = entièrement opaque)
4 stroke (Boolean. Par défaut : true) Décrire ou non la forme
5 strokeColor (Valeur par défaut : ’ff0000’) La couleur du contour
6 strokeOpacity (Nombre par défaut : 1) L’opacité du contour (0 = entièrement transparent, 1 = entièrement opaque)
7 strokeWidth (Nombre par défaut : 1) L’épaisseur du contour
8 fade (Booléen. Par défaut : true) Que ce soit pour se faner dans les formes sur mouseover
9 alwaysOn (Boolean. Par défaut : false) Indiquer ou non les zones héliogravées
10 neverOn (Boolean. Par défaut : false) Qu’il ne faut jamais montrer les zones hilight (Cela n’a de sens que d’utiliser comme métadonnées par zone, bien sûr.)
11 groupBy (Valeur par défaut : false) Le nom d’un attribut pour les zones de groupe. Si cela est présent, toutes les zones de la carte qui ont la même valeur d’attribut que la zone en vol stationnaire
12 wrapClass (String / bool. Par défaut : false) Si true, applique la classe sur le <img> à l’enveloppe div maphilight créée. Si une chaîne, cette chaîne est utilisée comme une classe sur le wrapper div.
13 shadow (Boolean. Par défaut : false) Appliquer une ombre à la forme. (Fonctionne uniquement avec les navigateurs supportant la toile. So, everything but IE below version 9.)
14 shadowPosition (String. Par défaut : ’outside’) Où placer l’ombre. Peut être « outside », « inside » ou « both ».
15 shadowFrom (String / bool. Par défaut : false) Ce qu’il faut utiliser pour jeter l’ombre. Peut être ’stroke’ ou ’fill’. Si false, choisissez une valeur basée sur la position d’ombre. (En général, il semble mieux s’il est coulé à partir d’un remplissage quand il est en dehors de la forme, et d’un coup quand il est à l’intérieur de la forme.)
16 shadowX (Nombre par défaut : 0) Décalage horizontal de l’ombre par rapport à la forme.
17 shadowY (Nombre par défaut : 0) Décalage vertical de l’ombre par rapport à la forme.
18 shadowRadius (Nombre par défaut : 6) Taille de l’ombre.
19 shadowColor (Valeur par défaut : ’000000’) Couleur de l’ombre.
20 shadowOpacity (Nombre par défaut : 0.8) Opacité de l’ombre.

 Code complet utilisé pour l’image de « La Louve Capitoline » :

<html>
<head>
   <meta charset="utf-8">
   <title>jQuery maphilight documentation</title>
   <script type="text/javascript" src="lib/maphilight/main.js" charset="UTF-8"></script><script type="text/javascript" src="lib/maphilight/jquery.min.js"></script>
   <script type="text/javascript" src="lib/maphilight/jquery.maphilight.js"></script>
   <script type="text/javascript">$(function() {
       $('.map').maphilight();
       $('#squidheadlink').mouseover(function(e) {
           $('#squidhead').mouseover();
       }).mouseout(function(e) {
           $('#squidhead').mouseout();
       }).click(function(e) { e.preventDefault(); });
   });</script>
</head>
<p>
<center><img src="IMG/jpg/louve-surfaces-03.jpg" width="500" height="300" style="border-style:none" class="map" usemap="#louve-surfaces-03" /></center>
<center><map name="louve-surfaces-03">
<area shape="poly" alt="Link" 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" target="_blank" data-maphilight='{"strokeColor":"0000ff","strokeWidth":2,"fillColor":"ff0000","fillOpacity":0.2}' title="Tete de la louve : 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="Link" 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" target="_blank" data-maphilight='{"strokeColor":"00ff00","strokeWidth":2,"fillColor":"0000ff","fillOpacity":0.2}' 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="Link" 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="spip.php?article213" target="_blank" data-maphilight='{"strokeColor":"ff00ff","strokeWidth":2,"fillColor":"ff0000","fillOpacity":0.2}' title="Remus : Le Logiciel libre, un collaboratoire-comp&eacute;titoire plan&eacute;taire socio-constructiviste." />
<area shape="poly" alt="Link" 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="spip.php?article221" target="_blank" data-maphilight='{"strokeColor":"00ffff","strokeWidth":2,"fillColor":"ff0000","fillOpacity":0.2}' title="Romulus : Les m&eacute;thodes actives au c&oelig;ur de nos pr&eacute;occupations." />
<area shape="rect" alt="Link" coords="1,1,499,299" href="https://fr.wikipedia.org/wiki/Louve_capitoline" target="_blank" data-maphilight='{"strokeColor":"0000ff","strokeWidth":3,"fillColor":"ffff00","fillOpacity":0.2}' title="La Louve capitoline" />
</map></center>
</p>
</html>

 Documentation, téléchargements et exemples

SPIP

Dans la même rubrique

1995 - 2024 Ici & Là
Plan du site | | Contact | RSS 2.0

SPIP