Description
Ce plugin est basé sur l’utilisation des modèles SPIP et permet d’ajouter une nouvelle classe sur les images insérées dans le corps des articles, brèves ou rubriques : la classe cliquable
<imgXXX|cliquable><embXXX|cliquable>
L’utilisation de cette classe permet de transformer une image classique en image cliquable (ou mappée).
Démonstration
Exemple avec squelettes personnalisés SPIP 1.9.1
Et un autre exemple pour tester la surimpression au survol : Plan d’une pergola. Survolez la vue éclatée de la construction, et les différentes pièces apparaissent en rouge. Sympa non ?
Installation
- Récupérez le zip du plugin sur plugin.spip
- Copiez le répertoire image_cliquable dans le répertoire /plugins
Paramètres
Pour chaque zone cliquable de l’image, il faut définir 4 paramètres :
- type : type de la zone cliquable, 3 valeurs possibles :
-
circle, la zone est un cercle -
rect, la zone est un rectangle -
poly, la zone est un polygone
- coord : coordonnées de la zone cliquable, séparées par des virgules. Il prend les valeurs suivantes :
- coord = x1,y1,x2,y2 quand type = rect. (x1,y1) sont les coordonnées du point en haut à gauche. (x2,y2) sont les coordonnées du point en bas à droite.
- coord = x1,y1,R quand type = circle. (x1,y1) sont les coordonnées du centre du cercle et R est son rayon.
- coord = x1,y1,x2,y2,...,x9,y9 quand type=poly. Les couples (x1,y1) ... (x9,y9) sont les coordonnées de chacun des points composant le polygone.
- lien : adresse de la page à afficher après un clic
- alt : texte alternatif à afficher pour la zone cliquable
On ajoute après chaque paramètre, le numéro de la zone cliquable.
Attention :
- les paramètres doivent être ajoutés sur la même ligne.
- le filtre image_reduire ne doit pas s’appliquer :
- soit le filtre n’est pas appelé dans le squelette
- soit les dimensions de l’image cliquable sont inférieures aux dimensions données en paramètre du filtre image_reduire
Depuis la v2.1.0, deux nouveaux paramètres :
- nolist : permet de supprimer la liste des zones en dessous l’image
- maphilight : les zones sont colorisées au survol de la souris.
Exemple :
<img3|cliquable|nolist|maphilight|coord1=...>Exemple
Avec l’image en pièce jointe :
<img3|cliquable|coord1=60,123,242,190|type1=rect|lien1=https://www.spip.net|alt1=lien vers spip|coord2=73,73,72|type2=circle|lien2=https://www.spip-contrib.net|alt2=lien vers spip-contrib|coord3=88,58,297,58,254,171|type3=polygon|lien3=https://code.spip.net|alt3=lien vers code.spip>
Surimpression des zones au survol
Depuis la v2.1.0, il est possible d’activer le maphilight ; c’est-à-dire la colorisation d’une zone lorsqu’on la survole à la souris.
Il suffit d’ajouter « maphilight » dans la liste des paramètres.
Un exemple d’utilisation très concret : Plan de carport
Accessibilité : Attention, cette fonctionnalité désactive le focus des zones au clavier (touche Tab).
Divers
Pour déterminer graphiquement les coordonnées des zones, vous pouvez utiliser le filtre « image cliquable » de the Gimp (« Filtres »->« Web »->« Image Cliquable »).
Les parmètres coord, type, lien et alt correspondent respectivement aux paramètres coords, shape, href et alt de l’objet <area> en html
Le nombre de zone cliquables pour une image est limité à 12 dans la branche V1 de ce plugin.
Branche V2
Une nouvelle version de ce plugin est développée sur la zone de SPIP.
Nouveautés :
- Nécessite SPIP 2.1.14 minimum
- Nécessite Les Itérateurs pour SPIP 2.1
- Peut avoir un nombre quelconque de zone cliquables
- De plus, pour améliorer l’accessibilité du résultat, la liste des zone est affichée sous forme d’énumération sous l’image, classé par ordre alphabétique des alternatives textuelles à chaque lien.
- Enfin les liens peuvent utiliser la syntaxe des liens internes de SPIP (art12, rub12...)
Exemple de paramètres
Version 3.0.0
RSS 2.0
Vos commentaires
# Le 11 janvier 2017 à 12:06, par François Daniel Giezendanner
En réponse à : Plugin Image Cliquable
Bonjour Arnault Pachot, bruno31, RealET,
Merci beaucoup pour et excellent plugin qui fonctionne à la perfection.
Il faut relever la remarquable, très recherchée et très utile fonction de surimpression des zones au survol de la souris avec le maphilight (la colorisation d’une zone lorsqu’on la survole à la souris). Les webmaster on souvent beaucoup de difficulté à mettre en œuvre cette fonction, si l’on se base sur les nombreux forums qui traitent de la question de la colorisation d’une zone lorsqu’on la survole à la souris.
Deux remarques :
1) Centrer l’image
<center><img818|cliquable|maphilight|center|coord1=60,123,242,190|type1=rect|lien1=http://www.spip.net|alt1=lien vers spip|coord2=73,73,72|type2=circle|lien2=http://www.spip-contrib.net|alt2=lien vers spip-contrib|coord3=88,58,297,58,254,171|type3=polygon|lien3=http://doc.spip.org/|alt3=lien vers spip-doc>
</center>
<center>centre la liste des zones en dessous l’image dans les espaces privé et publique|center| centre l’image dans l’espace privé mais pas dans l’espace publique
2)
titletitlen’est pas reconnu par le plugin.On utilise donc
alt: texte alternatif à afficher pour la zone cliquable et les liens sous l’image.Bravo et bonne continuation
FDG
# Le 14 février 2017 à 23:37, par RealET
En réponse à : Plugin Image Cliquable
1)
<center>non seulement c’est du HTML, mais en plus il est invalide depuis longtemps, et c’est en CSS qu’il faudrait faire ça ;-)2) le plugin est sur la Zone, s’il y a une correction à y apporter, n’hésite pas
Répondre à ce message
# Le 10 janvier 2016 à 12:52, par ignace72
En réponse à : Plugin Image Cliquable
Bonjour,
J’ai un soucis avec les liens.
J’utilise la version 3.0.3 du plugin.
Je voudrais que les liens pointent vers des ancres dans la même page.
Le soucis :
J’ai ce lien
[Bas-Saint-Laurent->#bas-saint-laurent]qui fonctionne bien mais dès que je le mets dans l’image cliquable, j’ai une erreur 404.La balise lien est la suivante :
lien1=[Bas-Saint-Laurent->#bas-saint-laurent]J’ai essayé plusieurs syntaxe mais rien n’y fait.
J’arrive à atteindre l’ancre en mettant le lien complet
https://ignace72.eu/spip.php?article31#bas-saint-laurentQuelqu’un a-il une idée pour résoudre mon problème ?
Merci
# Le 10 janvier 2016 à 18:32, par bruno31
En réponse à : Plugin Image Cliquable
Bonjour
et avec : article31#bas-saint-laurent
# Le 11 janvier 2016 à 17:35, par ignace72
En réponse à : Plugin Image Cliquable
Salut,
Nan, c’est pas mieux mais c’est gentil d’avoir proposé.
Par-contre, j’ai un autre soucis.
À près 6 zones cliquables, la commande ne fais plus rien mais s’affiche en clair dans l’article.
Y a-il une limitation de caractères pour une commande sur SPIP ou pour le plugin ?
Pour info le code HTML de l’image cliquable fait 42 lignes et 11 166 caractères.
Le code source de la page HTML d’origine est ici :
view-source :https://ignace72.eu/quebec/geographie.html
Merci.
Répondre à ce message
# Le 18 janvier 2015 à 20:24, par zorgol
En réponse à : Plugin Image Cliquable
Bonjour,
Je viens de découvrir ce plugin que je trouve très pratique. Merci aux développeurs.
Mon utilisation est basique et je l’utilise pour paramétrer un lien simple avec la syntaxe suivante :
<img4316|cliquable|center|maphilight|nolist|coord1=0,0,270,187|type1=rect|lien1=http://cubacoop.org/squelettes/script/cubacoop2.php
|alt1=http://cubacoop.org/squelettes/script/cubacoop2.php/>
tout semble fonctionner sauf l’option center.
Pouvez-vous m’indiquer comment centrer l’image ?
voir sur le site http://cubacoop.org/
j’utilise le plugin dans les annonces de la colonne de droite du site.
Répondre à ce message
# Le 26 août 2014 à 20:09, par jeromeD
En réponse à : Plugin Image Cliquable
Bonjour,
J’utilisais le plugin dans la version 1 mais la nouvelle version est encore plus complète. Bravo.
J’ai une question à propos du maphilight : Il est en rouge avec opacité. Est-il possible de changer sa couleur est dans quelle fichier ?
Merci d’avance pour vos réponses.
jérôme
Répondre à ce message
# Le 11 juin 2014 à 16:40, par clippi
En réponse à : Plugin Image Cliquable
Bonjour,
j’ai téléchargé et installé le plugin « image cliquable » et j’ai voulu faire un test avec une image.... J’ai inséré les zones cliquables avec The Gimp et récupéré le code source (toujours avec ce gimp) que j’ai collé dans mon site.... j’ai ajouté mon image (.map mais lorsque je l’insère dans mon article elle apparait en .txt) et lorsque je mets en ligne, on voit le code source et pas l’image.
Quel est le problème ?
Vous remerciant par avance,
Christine LIPPI
http://missiontice.ac-besancon.fr/college-jouffroy-d-abbans/spip/ (SPIP 2.1.23 et squelette EVA-Web 4.1)
# Le 11 juin 2014 à 17:45, par RealET
En réponse à : Plugin Image Cliquable
Bonjour,
Avez-vous bien vu que le format de l’appel à l’imagemap est spécifique à ce plugin ?
# Le 11 juin 2014 à 19:31, par clippi
En réponse à : Plugin Image Cliquable
C’est-à-dire ? (désolée mais je débute et pour moi tout n’est pas toujours claire..). Il faut que je sélectionne quelque part dans mon article le plugin « image cliquable » ?
Merci
# Le 12 juin 2014 à 07:51, par RealET
En réponse à : Plugin Image Cliquable
Vous avez lu la documentation au dessus ?
Vous avez modifié le code d’image map fait avec Gimp pour qu’il utilise la syntaxe documentée ci-dessus ? Qui ressemble à :
<img3|cliquable|coord1=60,123,242,190|type1=rect|lien1=http://www.spip.net|alt1=lien vers spip|coord2=73,73,72|type2=circle|lien2=http://www.spip-contrib.net|alt2=lien vers spip-contrib|coord3=88,58,297,58,254,171|type3=polygon|lien3=http://doc.spip.org/|alt3=lien vers spip-doc># Le 16 juin 2014 à 13:07, par clippi
En réponse à : Plugin Image Cliquable
Oui, j’ai lu la documentation mai je pense que quelque chose m’échappe...
Dans mon article, j’ai collé le code source récupéré dans the Gimp (voir en pièce jointe)
Répondre à ce message
# Le 16 juillet 2013 à 17:06, par Tony CVx
En réponse à : Plugin Image Cliquable
J’ai finalement trouver la source de mon problème : il semblerait que toutes les zones doivent renvoyer à un lien. D’ailleurs je me demande comment je vais faire pour une image où je voudrai juste me contenter d info-bulles....
J’ai un autre problème (et j’espère que ma question aura plus de succès que la précédente...).
Toujours avec la même image qui marche parfaitement en HTML, je me retrouve avec un décalage des zones cliquables,. Encore plus bizarre, la translation en question n’est pas la même sur toutes les zones. Quelqu’un a idée ?
Répondre à ce message
# Le 10 juillet 2013 à 20:02, par tony cvx
En réponse à : Plugin Image Cliquable
Bonjour,
(SPIP3.0 et plugin 3.0.0.(16ko))
super plugin sauf que ... bien qu’il marche très bien pour ce qui est du coté "cliquable" l’option maphighlight est malgré tout sans effet.
autre chose a la différence de carte avec une 30ène/40ène de zones avec laquelle celà marche très bien, avec une carte comportant plus de 90 zones impossible d’afficher la moindre info bulles. A noter que lorsque je ne met pas l’option "nolist" les zones cliquables sont malgré tout listés (donc reconnu j imagine). Une idée d’où celà peut il provenir ? y a t il un ordre préférentiel a respecter absolument pour "alt" coord" "title" "lien"...
)
un extrait ci dessous :
« img4|center|cliquable|nolist|maphilight|
type1=rect|coord1=105,159,127,190|lien1=|alt1=CRECHE COLLECTIVE DU 11 NOVEMBRE|title1=CRECHE COLLECTIVE DU 11 NOVEMBRE-Montrouge|
type2=rect|coord2=150,102,172,132|lien2=|alt2=CRECHE COLLECTIVE DEPARTEMENTALE ANATOLE FRANCE|title2=CRECHE COLLECTIVE DEPARTEMENTALE ANATOLE FRANCE-Bagnolet|
type3=rect|lien3=|alt3=MULTI ACCUEIL COLLECTIF LES BERGERONS|coord3=144,89,167,120|title3=MULTI ACCUEIL COLLECTIF LES BERGERONS-Pantin|
type4=rect|alt4=CRECHE LES PETITS CHENES|coord4=43,138,65,169|title4=CRECHE LES PETITS CHENES-Chaville|lien4=|
type5=rect|alt5=MULTIACCUEIL PICOTI-PICOTA|coord5=296,353,319,385|title5=MULTIACCUEIL PICOTI-PICOTA-La Ferte Alais|lien5=|
type6=rect|alt6=CRECHE COLLECTIVE LES NOBLETINS|coord6=287,337,310,369|title6=CRECHE COLLECTIVE LES NOBLETINS,Toussus le Noble|lien6=|
type7=rect|alt7=CRECHE COLLECTIVE DEPARTEMENT|coord7=70,151,93,182|title7=CRECHE COLLECTIVE DEPARTEMENT-Malakoff|lien7=|
...
type93=rect|alt93=MULTI ACCUEIL LES DAUPHINS BLEUS|coord93=413,494,436,526|title93=MULTI ACCUEIL LES DAUPHINS BLEUS-Villeurbanne|lien93=|
type94=rect|alt94=MINI-CRECHE DU TOURNESOL|coord94=403,482,426,514|title94=MINI-CRECHE DU TOURNESOL-Trevoux »
avec les signes < et > en fermeture bien sûr
Merci d’avance pour votre aide car là) je tourne en rond ;-
Répondre à ce message
# Le 20 septembre 2012 à 11:09, par bruno31
En réponse à : Plugin Image Cliquable
Bonjour
Contrairement à ce qui est écrit dans la doc, <embXXX|cliquable> ne fonctionne pas ?
# Le 14 mars 2013 à 08:10, par Guytarr
En réponse à : Plugin Image Cliquable
oui, je ne comprends pas très bien pourquoi emb_cliquable a été viré ?
Par ailleurs, devoir ajouter le paramètre nolist aux appels du modèle pour retrouver le même comportement que dans les versions antérieures du plugin est dommage.
Il faut repasser sur tous les appels du modèle ou le surcharger si l’on a utilisé emb et/ou qu’on gère déjà l’accessibilité par ailleurs.
# Le 14 mars 2013 à 10:42, par RealET
En réponse à : Plugin Image Cliquable
La V2 étant indépendante de la V1, et ayant consisté en une grosse refonte, il est effectivement probable que certaines choses aient changées entre les 2 versions.
Par curiosité, comment gères-tu l’accessibilité par ailleurs ?
# Le 14 mars 2013 à 13:37, par Guytarr
En réponse à : Plugin Image Cliquable
Hello RealET,
Mon questionnement portait plutôt sur la compatibilité avec des paramètres à ajouter pour retrouver le même comportement qu’auparavant (plutôt que le contraire, des paramètres à ajouter pour de nouvelles fonctionnalités). Je n’y connais pas grand chose, et peut être je me trompe, mais voici :
Répondre à ce message
# Le 22 décembre 2012 à 15:49, par ojieur
En réponse à : Plugin Image Cliquable
Bonjour à tous,
Je n’y connais pas grand chose en programmation, mais je découvre spip à coups d’erreurs. j’apprends, quoi.
Petit souci : j’ai réussi à installer et utiliser la version 1 du plugin, mais je suis bien évidemment intéressé par « maphilight ».
j’ai fait mon possible pour faire passer le php 5 sur free, pour pouvoir installer itérateurs, puis image cliquable version 2.
Aucun message d’erreur, mais ça ne fonctionne pas. je rentre exactement le même code avec la version 1 ou la version 2 : en 1, ça fonctionne, mais pas en 2. du coup, pas non plus pu tester si maphilight fonctionne.
Une idée ?
Je profite de ce message pour demander : pensez-vous qu’il soit possible de mettre ce genre d’image cliquable en en-tête d’un site, continuellement disponible ?
D’avance, merci à vous, vous me rendriez un grand service en me dépannant.
# Le 27 décembre 2012 à 12:24, par bruno31
En réponse à : Plugin Image Cliquable
Bonjour
Essayez de désactiver tous les plugins. Laissez Image cliquable activé. Et voir le résultat.
# Le 28 décembre 2012 à 11:34, par ojieur
En réponse à : Plugin Image Cliquable
toujours pas d’effet, la version 2 du plugin ne semble pas fonctionner chez moi.
enfin, ce n’est pas grave, je bidouillerai en délimitant les zones cliquables sur le jpeg. Vu l’usage, cela suffira.
Merci encore.
# Le 28 décembre 2012 à 14:55, par bruno31
En réponse à : Plugin Image Cliquable
SPIP2 / SPIP3 ?
Un lien vers le site ?
# Le 28 décembre 2012 à 17:01, par ojieur
En réponse à : Plugin Image Cliquable
ça tourne sous spip 2.1.19
l’adresse : http://parisfle.free.fr
rien pour l’instant, que des articles-test
l’article en question pour l’image cliquable : http://parisfle.free.fr/spip.php?article1 (une zone cliquable en haut à gauche, une autre vers le centre-droit de la photo (rien de politique !)
en revanche, c’est actif pour le moment, mais avec la version 1 du plugin (puisque ça ne fonctionne pas sur la 2)
# Le 28 décembre 2012 à 17:07, par bruno31
En réponse à : Plugin Image Cliquable
Je suis sous SPIP 2.1.16
Et ça marche pour moi avec plein d’autres plugins. Exemple : http://carport.autoconstruction.inf...
# Le 29 décembre 2012 à 10:51, par ojieur
En réponse à : Plugin Image Cliquable
je fais peut-être une erreur dans le code ?
c’est correct ça ?
(au passage, à quoi servent les « alt » ?
Répondre à ce message
# Le 20 septembre 2012 à 00:34, par bruno31
En réponse à : Plugin Image Cliquable
Des zones qui changent de couleur au survol :
Un truc qui serait bien sympa, c’est que chaque zone (area) change de couleur au survol de la souris.
J’ai cherché mais apparemment cela n’est pas faisable simplement en css ou même en js.
Cependant, j’ai trouvé un script jquery qui le fait : http://archive.plugins.jquery.com/p...
Le script : https://github.com/kemayo/maphiligh...
Une démo : http://davidlynch.org/projects/maph...
C’est probablement une évolution sympa à intégrer dans le plugin ?
# Le 20 septembre 2012 à 12:06, par bruno31
En réponse à : Plugin Image Cliquable
Pour info, je fais des essais d’intégration du jquery maphilight.
D’après ce que j’ai vu, il suffirait d’inclure dans le head :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script><script type="text/javascript" src="http://davidlynch.org/projects/maphilight/jquery.maphilight.js"></script>
<script type="text/javascript">$(function() {
$('.map').maphilight();
});</script>
mais le jquery.min.js génère des erreurs sur d’autres tel que crayon.js
Il doit y avoir une incompatibilité au niveau de la version de jquery ou qq chose comme ça. Je connais pas bien jquery.
Si un développeur spip connaissant jquery pouvait m’apporter un support pour m’aider à intégrer maphilight dans le plugin ?
Si cela marche, je proposerai l’évolution+code aux développeurs du plugin.
Il est vrai que le résultat sur les démos est impressionnant. L’expérience utilisateur est vraiment améliorer. Cela serait un gros plus pour ce plugin.
# Le 20 septembre 2012 à 15:16, par bruno31
En réponse à : Plugin Image Cliquable
Bon j’ai réussi à réaliser le hilight sur les areas. Voir ici : Construire un carport.
Le résultat est très sympa.
Je souhaite que le(s) auteur(s) du plugin me contacte(nt) pour voir si on intègre l’évolution et comment ?
Merci
# Le 20 septembre 2012 à 15:17, par bruno31
En réponse à : Plugin Image Cliquable
J’ai fait la modif. très facile.
Je souhaite que le(s) auteur(s) du plugin me contacte(nt) pour voir si on intègre l’évolution et comment ?
# Le 20 septembre 2012 à 20:37, par RealET
En réponse à : Plugin Image Cliquable
Voir ma réponse sur la liste de la zone :
Sympa !
Mais uniquement à la souris : ça supporte le hover, mais pas la navigation avec tab au clavier.
En plus du hover, il faudrait traiter de manière équivalente le focus.
Sinon, c’est totalement inaccessible au clavier.
Donc, feu vert si tu le rends accessible aussi au clavier ;-)
Merci d’avance !
# Le 20 septembre 2012 à 22:27, par bruno31
En réponse à : Plugin Image Cliquable
J’ai essayé de répondre sur la liste zone mais j’ai un message d’erreur « top-posting ». Donc je continue ici.
Il me semble que la version actuelle ne supporte pas non plus le tab au clavier ?
J’ai juste intégré un script existant. Je ne suis en mesure de modifier pour
faire une prise en charge clavier, tant bien même que cela serait possible.
Si je ne prends pas en compte cette demande, dois-je comprendre que c’est un feu
rouge ?
# Le 20 septembre 2012 à 22:56, par RealET
En réponse à : Plugin Image Cliquable
Je viens de vérifier (avec FireFox) : la touche tab manifeste bien le focus sur la carte clicable en entourant en pointillés la zone en cours.
Donc, disons que c’est un demi feu rouge :
Répondre à ce message