SPIP - Contrib

SPIP - Contrib

[ar] [en] [es] [fr] [it]

54 visiteurs en ce moment

fontsizeup fontsizedown
[45 commentaires]

Plugin Image Cliquable

Ajouter des zones de clic dans une image

jeudi 8 mars 2007, par Arnault Pachot

1 vote

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

Installation

- Récupérez le zip du plugin sur spip-zone
- 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

Exemple

Avec l’image en pièce jointe :

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

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

Portfolio

Exemple d&#39;image cliquable
Retour en haut de la page

45 Messages de forum

Voir toute la discussion

Pages 1 | 2 | 3 | 4 | 5

  • Répondre à ce message

    3 juillet 15:23 , par 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

    1er juin 20:11

    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.

  • Répondre à ce message

    11 février 14:31 , par 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... ) 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

    19 décembre 2008 22:44 , par 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>

  • Répondre à ce message

    14 décembre 2008 11:24 , par 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

  • Répondre à ce message

    26 novembre 2008 22:10 , par 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

    28 octobre 2008 09:50 , par 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

    5 octobre 2008 20:57 , par pierre-kuhn

    Bonjour

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

  • Répondre à ce message

    7 août 2008 13:12 , par joz

    chez moi non plus :-( (FF3)
    joz

  • Répondre à ce message

    7 juillet 2008 22:13 , par Anthony

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

Pages 1 | 2 | 3 | 4 | 5

Répondre à cet article

Retour en haut de la page

Ça discute par ici