Plugin Image Cliquable

Ajouter des zones de clic dans une image

Ce plugin permet aux rédacteurs d’associer des zones de clic aux images qu’ils ajoutent dans les textes

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

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 :

Exemple d’image cliquable
pour tester le plugin

<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...)

Discussion

41 discussions

  • 3

    Bonjour,
    j’aimerais utiliser ce plugin.
    Le portage vers la 4.0.0 de spip est il prévu ?
    Merci !

    Répondre à ce message

  • 2

    Bonjour,
    J’ai l’impression qu’on ne peut afficher plus de 20 points : j’ai testé, 20 points ça marche, 21 ça ne marche plus...
    https://internet22.catholique.fr/Couverture-web-des-paroisses-du-diocese.htm

    Répondre à ce message

  • Bonjour,

    Une autre petite question. Vous croyez qu’il serait possible de rendre Image Cliquable compatible avec l’usage du plugin Photoswipe ? Par exemple, je souhaiterais qu’il soit possible d’avoir des zones cliquables lorsqu’on navigue em mode zoom sur l’image du lien suivant http://www.portal.zoo.bio.br/media457

    Merci !

    Répondre à ce message

  • Chers amis,

    J’ai réussi très bien à mettre une image avec des zones cliquables sur mon site avec l’aide du logiciel Gimp. Mais maintenant je me casse la tête pour informer des zones dans une nouvelle image. Peut être quelque chose m’échappe sur l’utilization de Gimp. Comment utiliser le logiciel ? Est-ce qu’il faut sauver le fichier .map ou sauver le fichier image sur Gimp avec .map et utiliser le même fichier sur SPIP. Quand je fais les manips, les zones cliquables sont toutes dans des endroits qui n’ont rien a voir avec les coordonnés souhaités.

    Répondre à ce message

  • 2
    Filipe Aléssio

    Bonjour ! Merci pour ce merveilleux plugin. Je me regale.

    Je voudrais savoir s’il est possible de ne pas afficher la liste des zones cliquables en bas de l’image.

    « 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. »

    • Comme indiqué, c’est pour des raisons d’accessibilité.
      Mais tu peux styler cette zone pour la masquer (pas avec un display:none) d’une manière qui la rende toujours accessible aux assistances pour mal-voyants.

    • Merci pour la réponse. J’ai trouvé une solution par hasard en train de chercher le lien pour traduire la petite phrase qui s’affiche « liste des zones cliquables » (vous savez où elle se trouve ?).

      La solution est dans le propre modele. Pour ne pas afficher la liste, on écrit

      img449|cliquable|nolist|...

    Répondre à ce message

  • lagrenouille

    salut

    sympa de voir ce plugin adapté à spip
    j’ai toujours fait ça avec « the gimp », très facile à réaliser
    je testerai donc

    Répondre à ce message

  • 1

    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) title
    title n’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

    • 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

  • 2

    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-laurent

    Quelqu’un a-il une idée pour résoudre mon problème ?
    Merci

    • Bonjour

      et avec : article31#bas-saint-laurent

    • 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

  • 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

  • jeromeD

    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

  • 4

    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)

    • Bonjour,

      Avez-vous bien vu que le format de l’appel à l’imagemap est spécifique à ce plugin ?

    • 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

    • 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>

    • 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

  • 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

  • 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

  • 3

    Bonjour

    Contrairement à ce qui est écrit dans la doc, <embXXX|cliquable> ne fonctionne pas ?

    • 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.

    • 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 ?

    • 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 :

      • je masque l’alternative textuelle pour les navigations graphiques (display:none). Si j’utilise les images réactives, c’est que je veux que le visiteur les utilisent dans la mesure de son possible. Ca peut être discutable bien sûr, et à chacun d’adapter selon ses cas.
      • je propose de sauter la lecture de l’alternative textuelle via une ancre dans le cas où l’on s’est déjà taper tous les alt (dont la lecture est rarement mal prise en charge par la synthèse vocale, et forcer l’énumération du desc des liens deux fois de suite ça me paraît contre-productif). Je pense que c’est important.
      • je gère à la mano l’alternative textuelle pour que l’ordre et la structure soient pertinents (d’où ma désagréable surprise de voir cette liste auto s’ajouter par défaut à l’upgrade).

    Répondre à ce message

  • 6

    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.

    • Bonjour

      Essayez de désactiver tous les plugins. Laissez Image cliquable activé. Et voir le résultat.

    • 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.

    • SPIP2 / SPIP3 ?

      Un lien vers le site ?

    • ç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)

    • Je suis sous SPIP 2.1.16

      Et ça marche pour moi avec plein d’autres plugins. Exemple : http://carport.autoconstruction.inf...

    • je fais peut-être une erreur dans le code ?

      c’est correct ça ?

      (au passage, à quoi servent les « alt » ?

    Répondre à ce message

  • 6

    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 ?

    • 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.

    • 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

    • 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 ?

    • 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 !

    • 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 ?

    • 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 :

      • tu peux commiter
      • mais en mettant ce script non inséré par défaut
      • et activable dans la config en précisant bien qu’en l’état, ça rend la carte inaccessible au clavier

    Répondre à ce message

  • 4

    Suggestion :

    Bonjour

    Je suggère d’ajouter un paramètre dans le modèle qui supprime l’affichage de la liste des areas.

    • 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 ?

    • Salut,

      Merci pour cette belle évolution. Tu peux commiter directement la modif sur le plugin, en demandant des accès au SVN de spip-zone (si tu ne les a pas)

      Arnault

    • Hi Arnaud

      J’ai les accès sur la zone. J’ai fait un checkout. Par contre, je ne comprends pas la structure. Il y a un répertoire « trunk » et un répertoire « branches » avec seulement un « v1 » à l’intérieur.

      Pourtant j’ai travaillé sur la v2. J’ai pas vu de répertoire « v2 ».

      Peux-tu me dire où commiter exactement ?

    • C’est sur le trunk : svn ://zone.spip.org/spip-zone/_plugins_/image_cliquable/trunk

    Répondre à ce message

  • Bonjour,
    Excellent plugin ! Je viens de l’activer avec Spip 2.1.15 et Sarka_Spip 3.0.8, il fonctionne impec !

    Répondre à ce message

  • Bonjour,

    Une version pour SPIP 2.1.8 est-elle prévue ?

    Cordialement

    FDG

    Répondre à ce message

  • Bonjour,
    Merci pour ce plugin bien utile ;
    Je rencontre cependant un problème sur firefox ; ma pagr d’accueil est constituée d’une image cliquable permettant au visiteur de choisir la langue souhaitée ; seul le premier lien fonctionne ; les 3 autres sont ignorés ; sur IE tout fonctionne normalement ; Auriez vous une idée ?
    Merci !
    lien vers le site
    http://www.reseau-mediterraneen-con...

    Répondre à ce message

  • 1

    Bonjour
    Quand j’utilisle le parametre cliquable, mon image est redimentsionnée en mode vignette, ce que je ne souhaite pas
    Comment modifier cela ?
    Agnes

    • En attendant une mise à jour du plugin, tu peux rajouter |embed=oui après cliquable. Par ex :
      <img3|cliquable|embed=oui|coord1=60,123,242,190|...

    Répondre à ce message

  • Merci, ca marche bien sous SPIP 2.0
    En revanche, j’avais mis une personnalisation dans mon modèle img.html pour des filtres de redimensions, et je ne peux pas utiliser a la fois le parametre cliquable et les parametres de dimension...
    Je sais pas trop ou ca se passe

    Répondre à ce message

  • 2

    Bonjour,

    Je voulais savoir si le plungin était compatible avec spip 2. Et sinon, est-il prévu une mise à jour.

    J’utilise le plugin sous spip 1.9.2 et je remercie son auteur car c’est ce que je cherchais.

    • Bonjour,

      Je l’ai installé sous SPIP 2.0.9 et Sarka-SPIP 3.0.1, et ça fonctionne à première vue.

      Merci pour ce plugin qui m’est indispensable car outre le bandeau et un menu horizontal, ma page d’accueil ne contient que l’article Edito lequel intègre 3 images cliquables qui renvoient vers 3 articles spécialisés non accessibles par le menu. Cela me paraissait impossible à réaliser.

      Si quelqu’un avait une idée pour conserver l’effet de survol obtenu habituellement par le css, ce serait parfait ?

    • bonjour, as tu trouvez une réponse à ta question ? je n arrive pas non plus a voir le texte en survol avec le codage suivant :
      alt1=lien vers ne fonctionne pas

    Répondre à ce message

  • 1

    Bonjour,

    afin de faire une visite guidée sur un site web j’ai un plan que je souhaite rendre cliquable.
    Chaque salle présente sur le plan possède un lien vers un article.
    (un article par salle / une salle par article)
    Ce site http://iutp.univ-poitiers.fr/mesure... fonctionne
    selon ce principe.
    Le problème apparait lorsqu’on clique sur une salle. On va bien vers l’article de la salle en question
    mais le soucis c’est que l’article de la salle ne contient pas lui même le plan. Il faudrait que chaque
    article de salle contienne le plan car sinon on est obligé d’utiliser le fil d’ariane pour revenir sur le plan
    (ce qui n’est pas très pratique)
    Comment procéderiez-vous pour avoir le plan visible dans chaque article de salle ?

    Merci d’avance

    • Bonjour —

      Je sais que ton message a été envoyer il y a longtemps, mais je réponds quand-même car ça peux toujours servir...

      Je ne suis pas experte, mais je me demande si tu ne pourrais pas utiliser la balise INCLURE pour ne pas avoir besoin de mettre l’image dans chaque article...

    Répondre à ce message

  • Pour utiliser le raccourci <imgXX|map=nom_map|left> à la rédaction d’un texte

    Il suffit de façon très simple dans SPIP2, de modifier le fichier prive/modeles/img.html recopiez le dans squelettes/modeles/img.html

    Ajoutez seulement[ usemap="(#ENV{map})"] dans la balise <img comme ceci (ligne 24)

    <img src='#URL_DOCUMENT'[ usemap="(#ENV{map})"] ...

    Je l’ai utilisé ainsi <img265|center|map=#ONDMAP>

    voilou !

    Répondre à ce message

  • Bonjour,

    Je suis en train d’installer votre plugin qui correspond tout à fait à ce que je cherchais (merci !) mais au niveau du lien j’ai un souci :
    les raccourcis spip , du style type :« ->rub04 » (entre []) ne fonctionnent pas ...
    il faut remettre l’url en entier ?

    merci d’avance

    Répondre à ce message

  • 1

    bonjour, merci pour la contrib un serieux coup de main... toutefois j’ai bidouiller un peu le point de depart pour mettre des pop-up sur les liens, j’utilise un openwindows en java script que je nome O_W, sous firefox impecable un petite fenetre s’ouvre, mais avec IE7 rien a faire ca fonctionne pas

    au secour merci voici un boout du code pour donner l’idée generale

    <img src='#URL_DOCUMENT'[ width="(#LARGEUR)"][ height="(#HAUTEUR)"] usemap="#[AP(#URL_DOCUMENT|md5)]" alt="[(#TITRE|texte_backend)]"[ title="(#TITRE|texte_backend)"] />
    <map name="AP[(#URL_DOCUMENT|md5)]" id="AP[(#URL_DOCUMENT|md5)]">
    
    [<area shape="#ENV{type1}" coords="(#ENV{coord1})" href="?var_mod=calcul"  onClick='O_W("#ENV{lien1}","#ENV{alt1}","width=400,height=300,status=no,toolbar=no,menubar=no,location=no")' alt="#ENV{alt1}" />]...

    et le script o_w

    <script language="JavaScript" type="text/JavaScript">
    function O_W(theURL,winName,features) { //v2.0
    window.open(theURL,winName,features);
    }
    </script>

    classique lui aussi.

    merci de votre aide

    • Bonjour,
      je trouve votre contribution très intéressante car je cherche justement à faire des images cliquables (avec le plugin présenté ça fonctionne) mais je souhaiterais que lorsqu’on clique, cela ouvre une popup à la façon de thickbox (voir ici : http://icp.ge.ch/sem/valdebcms/spip.php?article408 ) avec du texte dedans.
      Je m’explique : sur un image de l’Europe, on clique sur Allemagne (zone cliquable) et s’ouvre alors (o miracle !) une popup dans laquelle figurent les informations principales concernant ce pays / et non simplement un lien vers une autre page.

      Votre script fonctionnerait-il sous spip 1.9.2e ? Si oui, vous me le prêtez ??

      Merci d’avance !

    Répondre à ce message

  • Bonjour,

    Dans les liens à l’intérieur des images cliquables, je souhaite renvoyer vers d’autres articles de mon site. J’ai mis :

    <emb1987|cliquable|type1=rect|coord1=136,127,179,207|lien1=article151|alt1=Aller à Tataouine>

    Malheureusement, ça ne transforme pas article151 en un lien vers l’article en question, ça le laisse tel quel.

    Répondre à ce message

  • 2

    L’exemple d’image cliquable en portfolio de fonctionne pas (I.E.7, vista)
    Anthony.

    • chez moi non plus :-( (FF3)
      joz

    • Hello,
      sorry, j’avais p-ê mal compris. Sur le site d’exemple, c’est dans la tête de page qu’il y a un exemple d’image cliquable !! Moi j’avais essayé sur la carte plus pas dans la page... (c’est une exemple un peux trompeur)
      Alors oubliez ce que je disait avant, ça fonctionne très bien.

      Merci pour ce plugin :-)
      à bientôt
      joz

    Répondre à ce message

  • pierre-kuhn

    Bonjour

    Est ce que vous avez commencez à la travailler une mise a jour de votre plugins

    Répondre à ce message

  • 14

    Les infos titre et descriptif n’ont plus l’air d’être prise en compte lors de l’affichage.

    [<div class='spip_doc_titre'><strong>(#TITRE)</strong></div>][<div class='spip_doc_descriptif'>(#DESCRIPTIF)</div>]</div>
    • Eric Bernard

      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 :

      [(#TEXTE|typo_couleur|image_reduire{#CONFIG{taille_preview}})] <!-- Sarka 1.9.1 : redimensionnement configuré dans espace privé -->				

      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 :

      [(#TEXTE|typo_couleur|image_reduire{#CONFIG{taille_preview}})] <!-- Sarka 1.9.1 : redimensionnement configuré dans espace privé -->

      par :

      [(#TEXTE|typo_couleur)]

      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

  • pierrek

    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

  • 2

    comment enlever la bordure bleu qui se met automatiquement autour de l’image ?

    • bonjour,

      dans votre feuille de style :

      img {
               border: none;
      }

      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

  • 5
    Thierry

    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

    • Arnault Pachot

      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

  • 3

    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

    • Jean POULIQUEN

      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

  • Bonjour,

    et merci pour ce travail, par contre combiné avec le plugin « Un habillage irrégulier (float : ragged) » il ne fonctionne pas. Dommage il faut choisir ( en tout cas pour le moment )

     ;0)

    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 :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

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.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom