Plugin Image Cliquable

Ajouter des zones de clic dans une image

Published : 8 March 2007 – updated on 25 February 2025 – by Arnault Pachot, bruno31, RealET – 111 commentaires

1
2
3
4
5
29 Votes

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

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

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 :

Exemple d’image cliquable
pour tester le plugin

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

RWD à partir de la version 3.2.0

25 février 2025, les images cliquables sont désormais RWD : si elles sont trop grande pour l’affichage, elles sont réduites à la largeur de l’écran et les zones réactives sont adaptées en conséquence.

Discussion

5 years 1 year 3 months Without limit
par date
Filter

43 discussions

  • 4
    Fennec72

    Bonjour,

    Dans la discussion précédente, il est évoqué que cela ne fonctionne pas en responsive.

    En cherchant sur internet, j’ai vu qu’avec les fichiers SVG, les images cliquables fonctionnent en RWD.

    Par contre cela ne semble pas possible avec le Plugin Image Cliquable.

    Même si cela ne me semble pas “très propre” de coller le code du SVG directement dans l’article, est-ce possible et comment?
    Je l’ai testé et l’image ne s’affiche pas, alors que s’il l’on ouvre directement le SVG dans le navigateur, ça fonctionne.

    Ci-dessous le code d’un exemple de SVG avec zone cliquable et le SVG lui-même.

    Merci d’avance,

    Cordialement,

    Hervé

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="Calque_1" data-name="Calque 1" viewBox="0 0 623.56 636.5">
  <defs>
    <style>
      .cls-1 {
        fill: #81b0df;
      }

      .cls-2 {
        fill: #d992b1;
      }

      .cls-3 {
        fill: #75923c;
      }

      .cls-4 {
        fill: #fff;
        font-family: SegoeUIBlack, 'Segoe UI';
        font-size: 32.67px;
      }
    </style>
  </defs>
  <g>
    <g>
      <path class="cls-2" d="M78.54,187.31c-66.84,125.01-23.08,281.47,100.49,353.2,38.92,22.59,81.21,34.13,123.25,35.61l.21-258.94L78.54,187.31Z"/>
      <path class="cls-1" d="M320.86,576.11c87.85-3.1,172.22-49.89,219.62-131.53,47.57-81.95,46.18-178.84,4.85-256.82l-224.25,129.43-.21,258.92Z"/>
      <path class="cls-1" d="M570.09,173.13c23.2,43.3,35.26,92.14,34.89,141.23-.38,50.6-14.1,100.62-39.66,144.65-46.81,80.63-128.79,133.81-221.08,144.14l-1.09-14.86-22.34,25.87,25.86,22.34-1.08-14.82c98.41-10.79,185.89-67.41,235.78-153.35,27.18-46.82,41.76-100.01,42.17-153.84.39-52.18-12.43-104.1-37.09-150.14l-16.37,8.77Z"/>
      <path class="cls-2" d="M45.63,168.22l-32.31,11.12,13.35,6.51C-3.53,253.98-8.29,330.35,13.45,402.19c22.94,75.8,73.31,139.45,141.83,179.23,44.66,25.92,95.38,40.46,146.69,42.03l.57-18.56c-48.24-1.48-95.93-15.15-137.93-39.53-64.44-37.41-111.81-97.27-133.38-168.55-20.38-67.34-16.01-138.92,12.14-202.82l13.4,6.54-11.13-32.31Z"/>
    </g>
    <text class="cls-4" transform="translate(391.81 334.6)"><tspan x="0" y="0">PLAN</tspan></text>
    <text class="cls-4" transform="translate(354.57 373.81)"><tspan x="0" y="0">D’ACTION</tspan></text>
    <text class="cls-4" transform="translate(323.92 413.02)"><tspan x="0" y="0">ÉCONOMIQUE</tspan></text>
    <text class="cls-4" transform="translate(132.58 334.6)"><tspan x="0" y="0">PLAN</tspan></text>
    <text class="cls-4" transform="translate(95.33 373.81)"><tspan x="0" y="0">D’ACTION</tspan></text>
    <text class="cls-4" transform="translate(109.74 413.02)"><tspan x="0" y="0">SOCIALE</tspan></text>
  </g>
  <g>
    <a xlink:href="http://www.spip.net/">
      <path class="cls-3" d="M87.86,171.24l223.94,129.86,224.25-129.43c-22.09-35.42-52.89-66.11-91.51-88.53C320.9,11.37,163.22,51.04,87.86,171.24"/>
    </a>
    <path class="cls-3" d="M468.3,42.23C397.7,1.25,315.23-10.39,236.07,9.44,157.07,29.23,89.95,78.18,47.05,147.26l15.78,9.79C103.16,92.09,166.29,46.07,240.58,27.45c74.44-18.65,152-7.7,218.39,30.84,35.14,20.4,64.99,47.15,88.82,79.55l-12.35,8.38,33.57,6.43,6.44-33.56-12.28,8.33c-25.42-34.72-57.3-63.37-94.88-85.18"/>
    <text class="cls-4" transform="translate(266.18 122.94)"><tspan x="0" y="0">PLAN</tspan></text>
    <text class="cls-4" transform="translate(228.94 162.15)"><tspan x="0" y="0">D’ACTION</tspan></text>
    <text class="cls-4" transform="translate(206.95 201.36)"><tspan x="0" y="0">ÉCOLOGIQUE</tspan></text>
  </g>
</svg>
    
  
    
  
  
    
      
      
      
      
    
    
      PLAN
    
    
      D’ACTION
    
    
      ÉCONOMIQUE
    
    
      PLAN
    
    
      D’ACTION
    
    
      SOCIALE
    
  
  
    
      
    
    
    
      PLAN
    
    
      D’ACTION
    
    
      ÉCOLOGIQUE
    
  


    
			
    


    	
		
      
			
			
    • 
				
      
		
      
			
      
				
					
				
			
      
					
      
		
      
			
      
	
	
      
		
		
		RealET
		
	
      
	
      
		
	
      

      			
      Bonjour,
      

      Il y a un ticket à ce sujet : https://git.spip.net/spip-contrib-extensions/image_cliquable/-/issues/4
      

      Et, joie suave, un stagiaire sur le coup ;-)
      
					
      
	
      			
      • 
			
			
    • 
				
      
		
      
			
      
				
					
				
			
      
					
      
		
      
			
      
	
	
      
		
		
		Fennec72
		
	
      
	
      
		
	
      

      			
      Bonne nouvelle!  ;-)
      

      En attendant cette future belle évolution, j’ai testé avec succès un truc qui n’est à mon gout «pas très propre»:
      
Dans le champ le champ «Texte» d’un article Spip, j’ai fait un copier-collé du code du SVG cliquable à l’intérieur d’une balise <pre>...</pre>, comme dans mon commentaire ci-dessus.
      
					
      
	
      			
      • 
			
			
    • 
				
      
		
      
			
      
				
					
				
			
      
					
      
		
      
			
      
	
	
      
		
		
		RealET
		
	
      
	
      
		
	
      

      			
      Tu as essayé avec <html>le code svg</html> ?
      
					
      
	
      			
      • 
			
			
    • 
				
      
		
      
			
      
				
					
				
			
      
					
      
		
      
			
      
	
	
      
		
		
		Fennec72
		
	
      
	
      
		
	
      

      			
      J’ai testé avec <html></html>:

      -  avec <pre></pre> SPIP  génère un affichage fonctionnel aussi bien en Espace public qu’en Espace privé.

      -  par contre, avec <html></html>, si l’affichage public est OK, dans l’espace privé, la prévisualisation de l’article affiche le code du SVG en commençant par ⚠️ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="Calque_1"
      
					
      
	
      			
      • 
			
		
    
	
	
    Reply to this message
    

    • 	
		
  • 
	
    

	
    
		
    
	
	
	
	

    			
    

	
    
		
    
	
	
    
		
		
		Fennec72
		
	
    
	
    
		
	
    

    		
    Message validé trop vite et qui faisait doublon avec mon précédent message.
    
Désolé
    
			
    


    	
	
    Reply to this message
    

    • 	
		
  • 
	
    

	
    
		
    
	 3
	
	 
	

    			
    

	
    
		
    
	
	
    
		
		
		ivandps
		
	
    
	
    
		
	
    

    		
    Bonjour, 
    
j’aimerais utiliser ce plugin.
    
Le portage vers la 4.0.0 de spip est il prévu ?
    
Merci !
    
			
    


    	
		
	
	
    Reply to this message
    

    • 	
		
  • 
	
    

	
    
		
    
	 2
	
	 
	

    			
    

	
    
		
    
	
	
    
		
		
		pgiron
		
	
    
	
    
		
	
    

    		
    Bonjour,
    
J’ai l’impression qu’on ne peut afficher plus de 20 points : j’ai testé, 20 points ça marche, 21 ça ne marche plus...
    https://internet22.catholique.fr/Couverture-web-des-paroisses-du-diocese.htm
    
			
    


    	
		
	
	
    Reply to this message
    

    • 	
		
  • 
	
    

	
    
		
    
	
	
	
	

    			
    

	
    
		
    
	
	
    
		
		Filipe 
		
	
    
	
    
		
	
    

    		
    Bonjour,
    

    Une autre petite question. Vous croyez qu’il serait possible de rendre Image Cliquable compatible avec l’usage du plugin Photoswipe? Par exemple, je souhaiterais qu’il soit possible d’avoir des zones cliquables lorsqu’on navigue em mode zoom sur l’image du lien suivant http://www.portal.zoo.bio.br/media457
    

    Merci!
    
			
    


    	
	
    Reply to this message
    

    • 	
		
  • 
	
    

	
    
		
    
	
	
	
	

    			
    

	
    
		
    
	
	
    
		
		Filipe 
		
	
    
	
    
		
	
    

    		
    Chers amis,
    

    J’ai réussi très bien à mettre une image avec des zones cliquables sur mon site avec l’aide du logiciel Gimp. Mais maintenant je me casse la tête pour informer des zones dans une nouvelle image. Peut être quelque chose m’échappe sur l’utilization de Gimp. Comment utiliser le logiciel? Est-ce qu’il faut sauver le fichier .map ou sauver le fichier image sur Gimp avec .map et utiliser le même fichier sur SPIP. Quand je fais les manips, les zones cliquables sont toutes dans des endroits qui n’ont rien a voir avec les coordonnés souhaités.
    
			
    


    	
	
    Reply to this message
    

    • 	
		
  • 
	
    

	
    
		
    
	 2
	
	 
	

    			
    

	
    
		
    
	
	
    
		
		Filipe Aléssio 
		
	
    
	
    
		
	
    

    		
    Bonjour! Merci pour ce merveilleux plugin. Je me regale.
    

    Je voudrais savoir s’il est possible de ne pas afficher la liste des zones cliquables en bas de l’image.
    

    “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.”
    
			
    


    	
		
      
			
			
    • 
				
      
		
      
			
      
				
					
				
			
      
					
      
		
      
			
      
	
	
      
		
		
		RealET
		
	
      
	
      
		
	
      

      			
      Comme indiqué, c’est pour des raisons d’accessibilité.
      Mais tu peux styler cette zone pour la masquer (pas avec un display:none) d’une manière qui la rende toujours accessible aux assistances pour mal-voyants.
      
					
      
	
      			
      • 
			
			
    • 
				
      
		
      
			
      
				
					
				
			
      
					
      
		
      
			
      
	
	
      
		
		Filipe 
		
	
      
	
      
		
	
      

      			
      Merci pour la réponse. J’ai trouvé une solution par hasard en train de chercher le lien pour traduire la petite phrase qui s’affiche “liste des zones cliquables” (vous savez où elle se trouve?).
      

      La solution est dans le propre modele. Pour ne pas afficher la liste, on écrit
      

      img449|cliquable|nolist|...
      
					
      
	
      			
      • 
			
		
    
	
	
    Reply to this message
    

    • 	
		
  • 
	
    

	
    
		
    
	
	
	
	

    			
    

	
    
		
    
	
	
    
		
		lagrenouille 
		
	
    
	
    
		
	
    

    		
    salut
    

    sympa de voir ce plugin adapté à spip
    
j’ai toujours fait ça avec “the gimp”, très facile à réaliser
    
je testerai donc
    
			
    


    	
	
    Reply to this message
    

    • 	
		
  • 
	
    

	
    
		
    
	 1
	 
	
	

    			
    

	
    
		
    
	
	
    
		
		
		François Daniel Giezendanner
		
	
    
	
    
		
	
    

    		
    Bonjour Arnault Pachot, bruno31, RealET,
    

    Merci beaucoup pour et excellent plugin qui fonctionne à la perfection.
    
Il faut relever la remarquable, très recherchée et très utile fonction de surimpression des zones au survol de la souris avec le maphilight (la colorisation d’une zone lorsqu’on la survole à la souris). Les webmaster on souvent beaucoup de difficulté à mettre en œuvre cette fonction, si l’on se base sur les nombreux forums qui traitent de la question de la colorisation d’une zone lorsqu’on la survole à la souris.
    

    Deux remarques :
    

    1) Centrer l’image
    

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

    <center> centre la liste des zones en dessous l’image dans les espaces privé et publique
    

    |center| centre l’image dans l’espace privé mais pas dans l’espace publique
    

    2) title
    
title n’est pas reconnu par le plugin. 
    
On utilise donc alt : texte alternatif à afficher pour la zone cliquable et les liens sous l’image.
    

    Bravo et bonne continuation
    

    FDG
    
			
    


    	
		
      
			
			
    • 
				
      
		
      
			
      
				
					
				
			
      
					
      
		
      
			
      
	
	
      
		
		
		RealET
		
	
      
	
      
		
	
      

      			
      1) <center> non seulement c’est du HTML, mais en plus il est invalide depuis longtemps, et c’est en CSS qu’il faudrait faire ça ;-)
      

      2) le plugin est sur la Zone, s’il y a une correction à y apporter, n’hésite pas
      
					
      
	
      			
      • 
			
		
    
	
	
    Reply to this message
    

    • 	
		
  • 
	
    

	
    
		
    
	 2
	
	 
	

    			
    

	
    
		
    
	
	
    
		
		ignace72 
		
	
    
	
    
		
	
    

    		
    Bonjour,
    
J’ai un soucis avec les liens.
    
J’utilise la version 3.0.3 du plugin.
    
Je voudrais que les liens pointent vers des ancres dans la même page.
    
Le soucis :
    
J’ai ce lien [Bas-Saint-Laurent->#bas-saint-laurent] qui fonctionne bien mais dès que je le mets dans l’image cliquable, j’ai une erreur 404.
    
La balise lien est la suivante : 
    
lien1=[Bas-Saint-Laurent->#bas-saint-laurent]
    
J’ai essayé plusieurs syntaxe mais rien n’y fait.
    
J’arrive à atteindre l’ancre en mettant le lien complet https://ignace72.eu/spip.php?article31#bas-saint-laurent
    

    Quelqu’un a-il une idée pour résoudre mon problème ?
    
Merci
    
			
    


    	
		
      
			
			
    • 
				
      
		
      
			
      
				
					
				
			
      
					
      
		
      
			
      
	
	
      
		
		
		bruno31
		
	
      
	
      
		
	
      

      			
      Bonjour
      

      et avec : article31#bas-saint-laurent
      
					
      
	
      			
      • 
			
			
    • 
				
      
		
      
			
      
				
					
				
			
      
					
      
		
      
			
      
	
	
      
		
		ignace72 
		
	
      
	
      
		
	
      

      			
      Salut,
      
Nan, c’est pas mieux mais c’est gentil d’avoir proposé.
      
Par-contre, j’ai un autre soucis.
      
À près 6 zones cliquables, la commande ne fais plus rien mais s’affiche en clair dans l’article.
      
Y a-il une limitation de caractères pour une commande sur SPIP ou pour le plugin ?
      
Pour info le code HTML de l’image cliquable fait 42 lignes et 11 166 caractères.
      
Le code source de la page HTML d’origine est ici :
      
view-source:https://ignace72.eu/quebec/geographie.html
      
Merci.
      
					
      
	
      			
      • 
			
		
    
	
	
    Reply to this message
    

    • 	
	


	





 


	
Add a comment

	
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :


  •  Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  •  Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :

    •  version de SPIP, en bas de la partie privée
    •  version du plugin testé et des éventuels plugins nécessités
    •  version de PHP (exec=info en partie privée)
    •  version de MySQL / SQLite
  •  Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  •  En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.


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.


	
	

	

	 


	


	

		

			
			
			

			

			 

			

	Who are you?

 
	

		

			
			 
			[Log in]
			
		

		

			
		

		 

	

	 
To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.




			

				Enter your comment here
				
				

					

						
						
						

							This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code  <q> <del> <ins>. To create paragraphs, just leave empty lines.
						

						
					

					
					
					 
					

						

							
							
						

					

					
				

			


			
			

				Add a document
				

					

						
						
						
						

							
							
						


						
					

				

			

			

			
			

				
				
			

			

			
		

	

	






 
	 
Follow the comments:
RSS 2.0
|
Atom