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
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
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
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 danssquelettes/modeles/img.html
Ajoutez seulement
[ usemap="(#ENV{map})"]
dans la balise<img
comme ceci (ligne 24)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
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
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 :
Malheureusement, ça ne transforme pas article151 en un lien vers l’article en question, ça le laisse tel quel.
Répondre à ce message
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
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 :
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 : |