Ici & Là

01 Société 02 Histoire 03 Science 04 Science fiction 05 SPIP 06 NTIC 07 Sondages 08 Divers
La meilleure façon de réaliser ses rêves est de se réveiller (Paul Valéry)

Accueil > SPIP > Navigation > Image Map jQuery MapHilight « Plugins SPIP » > « Plugin Image Cliquable » jQuery MapHilight pour SPIP avec zones changeantes (...)

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

mardi 10 janvier 2017, par François Daniel Giezendanner

Notez cet article
0 vote

 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

lien vers spip lien vers spip-contrib lien vers spip-doc

(liste des zones cliquables) :

Code utilisé pour l’exemple

<img818|cliquable|maphilight|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>

 Exemple 2

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

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

 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 <area> en html.

type
type : type de la zone cliquable, 3 valeurs possibles :

  1. circle, la zone est un cercle
  2. rect, la zone est un rectangle
  3. 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 :
<img3|cliquable|nolist|maphilight|coord1=...>

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

 Source et documentation

SPIP

Dans la même rubrique

1995 - 2024 Ici & Là
Plan du site | | Contact | RSS 2.0

SPIP