« Plugin Image Cliquable » jQuery MapHilight pour SPIP avec zones changeantes au survol de la souris

François Daniel Giezendanner — 2017-01-10T14:34:13Z

Sommaire

Introduction

Ce plugin permet aux rédacteurs d'associer des zones de clic aux images qu'ils ajoutent dans les textes. Il est décrit de manière détaillée dans l'article « Plugin Image Cliquable ».

De plus, fait important, ce plugin permet de changer la couleur des zones cliquables au survol de la souris.

Exemple 1

(liste des zones cliquables) :

Code utilisé pour l'exemple

Exemple 2

Un exemple détaillé d'utilisation de ce plugin est donné dans l'article :

Plugin Image Cliquable avec l'image de la Louve Capitoline
mardi 10 janvier 2017, par François Daniel Giezendanner
http://icietla-ge.ch/voir/spip.php?article217

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

L'utilisation de cette classe permet de transformer une image classique en image cliquable (ou mappée).

Paramètres

Pour chaque zone cliquable de l'image, il faut définir 4 paramètres :

coord, type, lien et alt qui correspondent respectivement aux paramètres
coords, shape, href et alt de l'objet en html.

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

Pour déterminer graphiquement les coordonnées des zones, de nombreux logiciels et sites Web sont disponibles, vous pouvez par exemple utiliser le filtre « image cliquable » de the Gimp (« Filtres »->« Web »->« Image Cliquable »).

lien
lien : adresse de la page à afficher après un clic

alt
alt : texte alternatif à afficher pour la zone cliquable

On ajoute après chacun de ces 4 paramètres, le numéro de la zone cliquable (ces 4 paramètres peuvent être écrits dans l'ordre de son choix).

Et deux paramètres généraux valables pour l'ensemble de zone cliquable de l'image :

nolist
nolist : permet de supprimer la liste des zones en dessous l'image.

maphilight
maphilight : les zones sont colorisées au survol de la souris.

Exemple :

Attention :
les paramètres doivent être ajoutés sur la même ligne.

Source et documentation

Plugin Image Cliquable
Ajouter des zones de clic dans une image
8 mars 2007 – par Arnault Pachot, bruno31, RealET
https://contrib.spip.net/Plugin-Image-Cliquable

image_cliquable
Mis à jour le 24 août 2015 . Préfixe : image_cliquable. Utilisé dans 544 sites
http://plugins.spip.net/image_cliquable

Code source du Plugin Image Cliquable
http://zone.spip.org/trac/spip-zone/browser/_plugins_/image_cliquable/trunk

Ici & Là

« Plugin Image Cliquable » jQuery MapHilight pour SPIP avec zones changeantes au survol de la souris appliqué à l'image de la Louve Capitoline

Introduction

Application du code à l'image 1

Application du code à l'image 2

Application du code à l'image 3

Code utilisé

« Plugin Image Cliquable » jQuery MapHilight pour SPIP avec zones changeantes au survol de la souris

Introduction

Exemple 1

Exemple 2

Description

Paramètres

Source et documentation