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
Exemple de paramètres
Vos commentaires
# Le 27 février 2011 à 18:40, par François Daniel Giezendanner
En réponse à : Plugin Image Cliquable
Bonjour,
Une version pour SPIP 2.1.8 est-elle prévue ?
Cordialement
FDG
Répondre à ce message
# Le 9 novembre 2010 à 08:15, par Jo
En réponse à : Plugin Image Cliquable
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
# Le 28 janvier 2010 à 13:19, par Agnes
En réponse à : Probleme de redimensionnement
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
# Le 11 mai 2010 à 12:58, par Yffic
En réponse à : Plugin Image Cliquable
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
# Le 16 décembre 2009 à 17:29, par Agnes
En réponse à : Plugin Image Cliquable
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
# Le 1er juin 2009 à 20:11, par ?
En réponse à : Plugin Image Cliquable
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.
# Le 27 octobre 2009 à 23:04, par hdeb
En réponse à : Plugin Image Cliquable
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 ?
# Le 25 novembre 2009 à 16:53, par ?
En réponse à : Plugin Image Cliquable
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
# Le 14 décembre 2008 à 11:24, par scls19fr
En réponse à : Article contenant une image cliquable à l’intérieur de plusieurs articles
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
# Le 9 novembre 2009 à 10:29, par v8buzz
En réponse à : Article contenant une image cliquable à l’intérieur de plusieurs articles
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
# Le 13 juillet 2009 à 15:14, par echo
En réponse à : Ajouter un attribut map au raccourci
Pour utiliser le raccourci à la rédaction d’un texte
Il suffit de façon très simple dans SPIP2, de modifier le fichier
prive/modeles/img.htmlrecopiez le danssquelettes/modeles/img.htmlAjoutez seulement
[ usemap="(#ENV{map})"]dans la balise<imgcomme ceci (ligne 24)Je l’ai utilisé ainsi
<img265|center|map=#ONDMAP>voilou !
Répondre à ce message
# Le 3 juillet 2009 à 15:23, par anne
En réponse à : Plugin Image Cliquable
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
# Le 19 décembre 2008 à 22:44, par pioz
En réponse à : Plugin Image Cliquable
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>
# Le 11 février 2009 à 14:31, par Polidoro
En réponse à : Plugin Image Cliquable
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
# Le 26 novembre 2008 à 22:10, par Eric
En réponse à : Plugin Image Cliquable / Lien interne
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