Plugin Image Cliquable

Ajouter des zones de clic dans une image

Publié le : 8 mars 2007 – Dernière modification le 21 décembre 2021 – par Arnault Pachot, bruno31, RealET – 105 commentaires

1
2
3
4
5
29 votes

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

5 ans 1 an 3 mois Sans limite
par date
Filtrer

41 discussions

  • 1
    Agnes

    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

    • Yffic

      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

  • Agnes

    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.

    • hdeb

      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
    scls19fr

    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

    • v8buzz

      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

  • touti

    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

  • anne

    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
    pioz

    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

    • Polidoro

      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

  • Eric

    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
    Anthony

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

    • joz

      chez moi non plus :-( (FF3)
      joz

    • 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

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