I - Rendre une partie d'image sensible et cliquable
La balise <map> permet de placer une ancre sur une image.
Cette page en est un exemple et montre comment utiliser la balise <map>, pour rendre uniquement cliquable une certaine partie d'image, de visuel ou de photographie.
Cette technique est souvent utilisée avec une carte et différents liens vers des villes ou des services proposés à tels ou tels endroits.
Dans l'exemple ci-dessous il s'agit de l'œil de cette odalisque peinte par Francesco Hayez.
II - Délimiter la ou les zones sensibles souhaitées avec The Gimp
Pour créer le lien sur l'œil de cette odalisque et comprendre cette technique, voila dans l'ordre la procédure à effectuer :
- Enregistrez cette image sur votre ordinateur via un clic droit > "Enregistrer l'image sous" (elle est dans le domaine public et libre de droit)
- Ouvrez-la avec « The Gimp »
- Menu > Filtres > Web > Image cliquable Web
- Ensuite sur la gauche choisissez la forme de la zone (dans cet exemple j'ai choisi circulaire/ovale)
- Cliquez au centre de l'œil sans relâcher le bouton de la souris et tirez vers le haut à gauche jusqu'à obtenir le cercle à la dimension voulue, puis cliquez à nouveau. La zone sensible est ainsi déterminée en pointillés
- Une nouvelle fenêtre s'ouvre alors (Paramètres de la zone N°1), avec "Site Web" sélectionné.
Remplissez le champ "URL à activer lorsque cette zone est cliquée" avec l'adresse de la page cible de votre lien (pour indiquer un chemin relatif, cochez "Autre"), puis validez - Cliquez ensuite sur l'icône (Modifie l'information de carte) et remplissez les champs :
- Nom de l'image : l'URL de l'image
- Titre : l'identifiant de l'image (ID de la usemap qui servira à l'identifier)
- Auteur : le nom du peintre ou du photographe
- Description : une description de l'image
- La zone cliquable est créée > Enregistrez sous > "francesco_hayez.jpg.map"
Capture d'écran de The Gimp
Pour finir, ouvrez "francesco_hayez.jpg.map" comme un fichier texte et copiez-collez les instructions dans une page HTML, pour obtenir ce résultat (à améliorer) :
<img src="img/francesco_hayez.jpg" width="600" height="539" border="0" usemap="#Odalisque" />
<map name="Odalisque">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:Francesco Hayez -->
<!-- #$DESCRIPTION:Odalisque de Francesco Hayez -->
<area shape="circle" coords="200,173,11" href="gimp.html" />
</map>
Pour rendre votre page HTML valide :
- Ajoutez alt="Description de votre image" dans les attributs de la balise <img ... />
- Supprimer border="0"
- Ajoutez alt="" dans les attributs de la balise <area />
- Et si vous désirez qu'une bulle de texte d'information apparaisse au survol du lien, ajouter l'instruction title="texte désiré" à la balise <area ... />
Cela vous donnera donc cette version améliorée :
<img src="img/francesco_hayez.jpg" width="600" height="539" alt="Odalisque de Francesco Hayez" usemap="#Odalisque" />
<map name="Odalisque">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:Francesco Hayez -->
<!-- #$DESCRIPTION:Odalisque de Francesco Hayez -->
<area shape="circle" coords="200,173,11" title="Découvrir The Gimp" alt="" href="gimp.html" />
</map>
Une fois votre page HTML éditée, vous pouvez mettre le fichier "francesco_hayez.jpg.map" à la corbeille puisque à présent inutile.
La documentation en Français du logiciel "The Gimp" a un paragraphe spécialement dédié sur ce sujet intitulé : Carte cliquable.
III - Rendre l'image et la zone sensible Responsive Web Design
Effectivement si l'image est redimensionnée (sur smartphone, tablette...) cette technique ne suffira pas. Il faudra pour y remédier la coupler à un plugin, par exemple celui de Matt Stow (un petit fichier en JavaScript s'appuyant sur la librairie jQuery) disponible gracieusement sur Github, permettant de recalculer la zone des coordonnées et la faire correspondre à la taille de l'image redimensionnée.
Voici la marche à suivre
- Télécharger le plugin : jQuery-rwdImageMaps
- Si possible précisez la taille (width & height) de votre image dans votre code HTML
- Ajouter à votre feuille de style CSS, celui-ci :
img[usemap] {
height: auto;
max-width: 100%;
width: auto;
} - Ajoutez sur votre page HTML, un lien vers la bibliothèque jQuery version >= 1.10.2 et celle de "rwdImageMaps" de préférence dans votre pied de page avant la fermeture du </body>.
Ici il s'agit du CDN mis à disposition par Google, mais libre à vous d'héberger cette bibliothèque jQuery sur votre serveur si vous préférez. - Puis ajoutez celui du script "jquery.rwdImageMaps.min.js" que vous aurez préalablement copié et mis dans le répertoire "js" (adaptez au besoin le chemin d'accès aux dossiers à votre site)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.rwdImageMaps.min.js"></script> - Sous celles-ci appelez cette fonction JavaScript:
<script>
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});
</script> - Votre image et sa map sera ainsi Responsive ! Cette page en est une démonstration, redimensionnez la fenêtre de votre navigateur pour la tester, l'œil est bien cliquable à n'importe quelle taille... Une autre démo (l'originale de Matt) ici : RWD-Image-Maps.
Vous avez aimé cet article, partagez-le !
Quand on prend la peine de découvrir les ficelles, on se sent moins marionnette