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...)
Discussions par date d’activité
41 discussions
Les infos titre et descriptif n’ont plus l’air d’être prise en compte lors de l’affichage.
J’ai le même problème apparement, le « titre » de la zone cliquable n’apparait pas.
Bonjour,
J’ai mis à jour l’archive pour corriger ce problème.
a+
Arnault
J’ai testé ce plug sur avec spip 191 et spip 192 squelette sarka.
sans succès.
j’ai utilisé l’image que vous proposez en test. avec la ligne de code suivante ( le plugin est activé) :
img376|cliquable|coord1=60,123,242,190|type1=rect|lien1=http://www.spip-contrib/|alt1=lien vers test (entre crochets)
les zones cliquables n’apparaisent pas..sur l’image
bonjour,
pouvez-vous me donner un lien pour que je regarde ?
a+
Arnault
Bonjour,
voici un lien vers un article « test »
http://www.lapro-montauban35.com/ancienseleves/spip.php?article29
le code édité dans l’article est :
« img2|cliquable|coord1=60,123,242,190|type1=rect|lien1=http://www.lapro-montauban35.com/spip.php?article230|alt1=lien vers france »
les " sont bien sûr des crochets <>
Merci
Si on regarde le code source de l’article, on constate que le plugin s’est bien appliqué sur l’image.
Par contre l’image affichée est réduite. Je pense que c’est la raison du problème.
dans squelettes/article.html :
Pouvez-vous augmenter ou annuler le redimensionnement ?
(sarka 192) dans fonctions avancées j’ai choisi : filtre « convert » et « ne pas générer d’image réduite »
— >toujours pas de clic.
(je n’ai donc pas modifié pour l’instant manuellement le code dans « article.html »
Par contre cette solution si elle fonctionnait ne permettrait plus de générer des vignettes réduites qui s’avèrent utiles dans les articles.( peut-on ne pas réduire une seule image ?)
Merci
Je vois que l’image est encore réduite, j’en déduis que vous avez réactivé la génération d’images réduites, c’est exact ?
Si vous ne pouvez pas enlever la réduction automatique des image, vous devez donc en tenir compte et adapter les coordonnées des zones de clic.
Mais si vous ne souhaitez pas réduire l’image de votre article, vous devez créer un squelette spécifique pour les articles de cette rubrique (la numéro 31 dans votre cas), dans lequel vous supprimez l’appel au filtre image_reduire. Il faudra le nommer article-31.html et remplacer :
par :
Tenez-moi au courant !
a+
Arnault
Bonjour,
Merci pour la réactivité de votre aide et sa qualité.
C’est effectivement le filtre réduire qui inhibait le plugin.
Par contre pour conserver le filtre de réduction sur l’ensemble du site et l’inhiber sur un article : j’ai compris votre idée ( ligne de code texte à modifier )
Mais je ne vois pas comment créer un « squelette spécifique »
( comment l’éditer , dans quel fichier ou dossier de spip, le mettre ...)
Merci encore.
Vos squelettes se trouvent dans le répertoire /squelettes. N’hésitez pas à consulter la documentation de SPIP
Il vous faut dupliquer le fichier /squelettes/article.html et renommer la copie /squelettes/article-31.html vous trouverez une explication ici de cette technique.
Ensuite dans /squelette/article-31.html désactivez le image_reduire comme je vous l’ai indiqué dans mon message précédent.
La réduction d’image ne s’executera alors plus sur les articles de la rubrique numéro 31.
Arnault
C’est la phrase « vous devez créer un squelette spécifique » qui me posait problème, je craignais qu’il faille installer entièrement tous les répertoires et fichiers d’un squelette.
Si j’ai bien compris , il n’y a que le fichier « article » à dupliquer, renommer et modifier et à placer dans le dossier « squelette » du site.
Merci et à encore félicitation pour la qualité de votre aide.
Bonsoir,
je souhaite également utiliser ce plugin pour la réalisation d’une visite virtuelle d’un collège.
j’ai modifié le code dans article.html pour ne pas avoir de problème avec la taille automatique des images sous sarka-spip, pour autant je n’arrive toujours pas à avoir mon image cliquable ?
Version sarka pour spip 1.9.2
Version spip : 1.9.2a
Lien pour tester le problème :
http://www.lucas.web-fr.org/spip.php?article54
D’avance merci pour votre aide.
—
xavier
Oups, j’avais fait une modif un peu rapide sur la dernière version et les images n’étaient plus cliquables
J’ai corrigé et mis à jour l’archive, que je t’invite à retélécharger.
c’est sympa ton idée de visite virtuelle ;)
yep merci beaucoup !
Tout fonctionne et merci pour ta remarque sur la visite ;o) en construction (comme le site que nous réactualisons sous sarka + des plugins sympas comme le tien ! Et tout ça avec les élèves.
Répondre à ce message
Bonjour,
Merci pour ce plug-in qui répond entièrement à mes attentes ! Bonne continuation et longue vie à tous les contributeurs !
Répondre à ce message
Bonjour
Je viens de trouver votre plugin ce qui va me permettre de faire des tests sur un site de généalogie.
Mais une fois activé ou dois-je le configurer ?
Répondre à ce message
comment enlever la bordure bleu qui se met automatiquement autour de l’image ?
bonjour,
dans votre feuille de style :
a+
ca y est déja ;
la bordure bleu apparait quand meme.
cette bordure n’apparait pas sur les images standards mais que sur les images où je me sert du plugins « image cliquable ».
Répondre à ce message
Ce plugin m’intéresse, par contre est-il possible d’étendre la limite du nombre de zones cliquables au delà de 12 ?
Merci d’avance
Oui, mais c’est un peu laborieux, pour chaque zone, il faut récupérer les paramètres et je m’étais arrété à 12. Mais vous pouvez augmenter cette limite :
- dans img_cliquable.html ligne 42, rajoutez autant de lignes
[<area shape="#ENV{typeXX}" coords="(#ENV{coordXX})" href="#ENV{lienXX}" alt="#ENV{altXX}" />]que vous souhaitez ajouter de zones (où XX et le numéro de la zone)- si éventuellement vous utilisez la balise
<embXX|cliquable>au lieu de<imgXX|cliquable>, faites le même genre de modif dans emb_cliquable.html ligne 54 en ajoutant des blocs{coordXX=#ENV{coordXX}}Arnault bonjour.
Je viens d’installer le plugin image_cliquable sur un site en local qui est en construction.
Le plugins fonctionne très bien jusqu’à 12 liens.
J’ai dupliqué 3 fois la ligne 42 de img_cliquable.html car j’ai besoin de 15 zones cliquables.
J’ai un plantage de mon serveur apache dès que j’entre ma treizieme zone.
Impossible de revenir dans l’interface d’admin au niveau de l’article en question.
Je suis oblige de restaurer une sauvegarde anterieur.
Phénomène très étrange !
Avez vous déjà eu des échos de ce type ?
En tout cas, merci pour ce plugin qui fait de nombreux heureux :-)
bonjour AleX,
Je ne vois pas le rapport qu’il peut y avoir entre le plugin et le serveur. C’est pas plutôt une erreur php, avec une page blanche ? il faudrait regarder le log d’erreur.
En cas de plantage, avez-vous essayé de renommer le répertoire du plugin, en principe ça résout les pb et donne accès à l’espace privé.
si vous insérez l’image avec il faut également ajouter les nouvelles zones dans emb_cliquable.html ligne 54.
peut être qu’un lien serait utile si vous avez un exemple à nous donner..
(ça me fait penser : ça serait top une interface graphique pour positionner les zones dans l’espace privé. avec un nouveau bouton « insérer une image cliquable » dans la barre typo.. ;) )
a+
Arnault bonjour.
Merci pour votre réponse.
Je ne peux malheureusement pas donner de lien car je fais des test en local sur mon ordi.
J’ai fait la manip, ligne 54 de emb_cliquable
Toujours rien, plantage du serveur apache dès que j’enregistre l’article avec une 13e zone.
Je n’arrive pas à trouvr de log d’erreur pour avoir plus de precisions
En ce qui concerne le site en ligne, je ne me suis pas beaucoup penché dessus, mais le plugin n’a pas l’air de marcher encore, est ce à cause de free ???
http://surlapetiteceinture.free.fr/spip/spip.php?article22
J’essairais de trifouiller....
AleX
Arnault rebonjour.
Je me suis pensché aujourd’hui sur le site en ligne.
En verifiant si la version du plugin que j’avais installée était la plus récente, je me suis rendu compte que le plugin s’était mal installé sur le serveur.
Sans doute un probleme de connexion ftp.
J’ai réinstallé tous les fichiers, et maintenant ça marche.
Je n’ai programmé qu’une zone, je ferai les test pour 13, 14, 15 zones plus tard...
Je n’ai pas encore eu le temps de me pencher sur le site en local...
AleX
Répondre à ce message
Bonsoir.
J’ai intégré les fonctions alt avec succès et, dans la foulée, ai
créé autant de lignes que j’avais de points à référencer, c’est à
dire 36. Cela fonctionne très bien. Il me reste cependant une
difficulté. Le résumé de l’article affiché sous la rubrique
correspondante donne les lignes de code du plugin.(cf.
http://patboro.free.fr/spip.php ?rubrique21) Je n’avais observé cette
anomalie précédemment. Comment faire pour les faire disparaitre ?
Merci d’avance
Patrick
Répondre à ce message
Bonsoir
C’est avec beaucoup de satisfaction que j’ai installé ce plugin dont la mise en oeuvre est des plus simple.
Seule petite difficulté : la commande alt est active sous Internet Explorer 6 mais pas sous FireFox version 2.0.0.9 (voir sur la carte des brasseries régionales http://patboro.free.fr/spip.php?article35 )
Y a-t-il une raison à cela ?
Merci
Patrick
Le plugin est facile à modifier pour que FireFox au survol de la souris affriche l’info sur le lien. (FireFox ne prend pas en compte alt mais title)
1 - MODIFIER Le fichier img_cliquable.html du plugin
ajouter à chaque ligne de la map title=« #ENVtitleN » N =1, 2,......12
2- Modifier le code en conséquence
ajouter pour chaque image titleN=le texte à afficher
Bonsoir
J’ai bien suivi vos instructions en remplaçant la commande alt par la commande title et, comme par enchantement, tout fonctionne à merveille.
Merci beaucoup pour votre contribution altruiste et votre disponibilité.
Salutations
Patrick
Bonsoir.
J’ai intégré les fonctions alt avec succès et, dans la foulée, ai créé autant de lignes que j’avais de points à référencer, c’est à dire 36.
Cela fonctionne très bien.
Il me reste cependant une difficulté.
Le résumé de l’article affiché sous la rubrique correspondante donne les lignes de code du plugin.(cf. http://patboro.free.fr/spip.php?rubrique21)
Je n’avais observé cette anomalie précédemment.
Comment faire pour les faire disparaitre ?
Merci d’avance
Patrick
Répondre à ce message
bonjour à tous !
ce plugins fonctionne merveilleusement dans un article ou une rubrique,
mais comment le faire fonctionner sur la page sommaire.html ?
merci d’avance pour les éventuelles réponses !
Répondre à ce message
Bonjour et merci pour ce plugin
J’aimerais savoir si il est possible de rajouter un bout de code pour permettre une ouverture de lien en pop-up (un lien externe).
Merci d’avance pour la réponse
Répondre à ce message
Bonjour,
J’utilise avec succès et entière satisfaction vos 2 plugins : image cliquable et panorama 360°.
J’aimerai savoir s’il est possible d’utiliser les deux en même temps sur une image.
Je m’explique. Je fais parti d’une asso qui essaye de restaurer le Fort-Médoc (http://amis-fort-medoc.fr/) et sur notre site (SPIP/EVA) en première page, j’ai mis un panorama général du Fort. J’ai essayé de rendre le panorama cliquable pour permettre l’accès directement à le rubrique correspondant au bâtiment choisi mais sans résultat.
Avez-vous une idée ou une explication ?
Arnaud.
Répondre à ce message
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Suivre les commentaires :
|
