Ajouter une image mappée pour la navigation

Cette solution d’insertion d’image mappée facilitant la navigation est non intrusive, c’est à dire qu’elle ne modifie en rien le bon fonctionnement du plugin de squelettes ni de SPIP lui-même. On peut toujours réaliser les mises à jours du plugin et de SPIP sans avoir peur de perdre des fonctionnalités que l’on aurait ajouté.

S’agissant essentiellement de sites académiques nous avons récupéré une carte des académies et souhaitons qu’un clic sur une académie nous renvoi automatiquement vers les ressources pédagogiques référencées sur le site.

À partir de l’image, nous utilisons Gimp pour créer une image mappée :
– ouvrir l’image dans Gimp Fichier/Ouvrir ;
– lancer le script de mapping : Filtre/Web/Image cliquable Web ;

Vous produirez un fichier de mapping à côté de votre image.

Nous plaçons l’image dans le répertoire /squelettes/images et le texte ci-après directement dans le "texte explicatif" de la rubrique elle-même (mais on peut faire exactement pareil dans un article).

<div style="text-align: center;"><img src="/squelettes/images/carte_academies.jpg" width="436" height="329" border="0" usemap="#map" /></div>

<map name="map">
<!-- #$-: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:Patrice HARDOUIN -->
<area shape="poly" coords="160,2,142,11,142,26,173,36,201,37,200,31,191,27,174,12,168,14" alt="Académie de Lille" href="http://www.biotechno.fr/spip.php?page=site&id_syndic=91" />
..................................................
</map>

Vosu noterez que nous avons, à la main dans ce fichier, modifié les adresses (href) de chaque académie par un renvoi vers l’indexation du site académique :

http://www.biotechno.fr/spip.php?page=site&id_syndic=XXX où XXX correspond au numéro d’indexation du site internet sur www.biotechno.fr.