Ici & Là

Test de Quatre logiciels générateurs d'« Images-Maps » sous MS-Windows

François Daniel Giezendanner — 2017-02-11T18:21:55Z

Sommaire

Introduction

En complément à l'article :

Test de Sept logiciels générateurs d'« Images-Maps » sous MS-Windows

voici le classement après tests rapides de quatre logiciels générateurs d'« Images-Maps » sous MS-Windows 7 :

1) Visual Imagemapper

2) Mapedit

3) Selteco) Image Mapper

4) Imagination Image Map Editor

et les références à d'autres générateurs.

1) Visual Imagemapper

Visual Imagemapper
Shareware : Copie d'évaluation de 15 jours
It is a program that enables you to create imagemaps for your websites.
... paste incomprehensible html code between the image map tool and the html editor, because ...
http://visual-imagemapper.software.informer.com/
http://visual-imagemapper.software.informer.com/download/

Test

Zoom : 0.25, 0.50, 0.75, 1, 2, 3, 4, 5 x
Création aisée et précise des zones : oui
Dinstinction claire entre les points et les lignes : oui
Possibilité d'ajouter et supprimer des points à une zone : oui
Remaniement aisé et précis des zones : oui
Images-Maps responsive : Non

2) Mapedit

Mapedit
Shareware : Copie d'évaluation de 30 jours
https://www.boutell.com/mapedit/
https://www.boutell.com/mapedit/download.html

Test

Zoom : 2, 4, 8, 16, 32, 64, 128 x
Création aisée et précise des zones : Oui
Dinstinction claire entre les points et les lignes : Oui
Possibilité d'ajouter des points à une zone : Non
Possibilité de supprimer des points à une zone : Oui
Remaniement aisé et précis des zones : Oui
Images-Maps responsive : Non

(3) Selteco) Image Mapper

(Selteco) Image Mapper
Shareware
Image Mapper allows quick and easy image maps creation for web sites.
... quick and easy image maps creation for ... map creation is finished, the result can be exported in HTML ...
http://image-mapper.software.informer.com/
http://image-mapper.software.informer.com/download/

Test

Zoom : Non
Création aisée et précise des zones : Oui
Dinstinction claire entre les points et les lignes : Non
Possibilité d'ajouter et supprimer des points à une zone : Non
Remaniement aisé et précis des zones : Non, pas de remaniement
Images-Maps responsive : Non

4) Imagination Image Map Editor

Imagination Image Map Editor
Shareware : Copie d'évaluation pour 20 usages
Easily make client-side HTML image maps for your website using this tool.
... image map data and required HTML image map code is automatically generated. - Easily add image maps ...
http://imagination-image-map-editor.software.informer.com/
http://imagination-image-map-editor.software.informer.com/download/

Test

Zoom : Non
Création aisée et précise des zones : Oui
Dinstinction claire entre les points et les lignes Non
Possibilité d'ajouter et supprimer des points à une zone : Non
Remaniement aisé et précis des zones : Non
Images-Maps responsive : Non

Autres Générateurs d'Images Maps

Free Imagemapper
Freeware
Excellent free tool for anyone to create interactive HTML image maps.
... available to produce HTML image maps. Its simplicity of ... in the final HTML image map do behave the ...
http://free-imagemapper.software.informer.com/
http://free-imagemapper.software.informer.com/download/
https://image-mapper.en.softonic.com/

Image Map Pro
https://webcraftplugins.com/image-map-pro-jquery-plugin/

ImageMap
http://www.tetzl.de/jimagemap.html

MapSpinner (pour Mac OS X)
MapSpinner is a web authoring tool that allows you to create clickable HTML image maps without writing code.
http://www.optima-system.com/mapspinner/

fahrenheit-marketing/jquery-canvas-area-draw
Canvas based ImageMap polygon editing textarea/input replacement for jQuery http://iakob.com/canvas-area-draw/demo.html
http://iakob.com/canvas-area-draw/demo.html
https://github.com/fahrenheit-marketing/jquery-canvas-area-draw

maschek/imgmap
Javascript based imagemap editor http://www.maschek.hu/imagemap/imgmap

Echec de l'installation ou de fonctionnement pour les logiciels :

Pos HTML Image Mapper
Shareware
Ne fonctionne pas d'emblée ! Au lancement, on obtient le message : Pos HTML Image Mapper a cessé de fonctionner
Easily create HTML image maps with this Photo Map Editor.
... create HTML image maps with this friendly Photo Map Editor/Image Map Editor. Pos HTML Image Mapper ...
http://pos-html-image-mapper.software.informer.com/
http://pos-html-image-mapper.software.informer.com/download/

Map Designer
Shareware
D'emblée le message : You have 0 day(s) left
Map Designer is an client-side and server-side Image Mapping Utility.
... simplify creation of clickable image maps. You can select ... a built-in visual HTML editor to edit the ...
http://map-designer.software.informer.com/
http://map-designer.software.informer.com/download/

Générateurs d'« Images-Maps » Online

François Daniel Giezendanner — 2017-02-10T16:36:49Z

Sommaire

Générateurs d'« Image-Map » Online

Image Map Generator - Image Map Creation Made Easy !
https://www.image-map.net/

M Image-Maps
https://www.image-maps.com/

Online Image Map Editor
http://maschek.hu/imagemap/imgmap/

Easy Imagemap Generator
http://imagemap-generator.dariodomi.de/

HTML Map Creator - why work hard ?
http://www.html-map.com/

Online HTML image map creator
http://www.mobilefish.com/services/image_map/image_map.php

Image Mapper
Creates a Clickable ImageMap/UseMap
- for web and auction navigation
  http://www.isdntek.com/tagbot/imap.htm

Summer html image map creator
http://summerstyle.github.io/summer/

Online Image Map Editor
imagecure.com - online image mapping
http://www.imagecure.com/index.php/online-image-map-editor

Online Image Map Editor
http://maschek.hu/imagemap/imgmap/
https://github.com/maschek/imgmap

CSE™ Image Map Creator
http://www.cavin.name/CSE/en/Programming/Image_map_generator.embed

HTML-Image map Creator WYSIWYG - uses AJAX
http://www.kolchose.org/simon/ajaximagemapcreator/

Image Map Generator
http://gaf210.imvustylez.net/codes/gadgets/image-mapper-lang-eng

Clickable Image Map Maker (CIMM)® v0.47b3
http://www.linkedresources.com/tools/cimm_0.47/c_0.47b3.htm

Générateurs d'« Image-Map » Responsives Online

Responsive Image Map Creator
http://image-map.weebly.com/

Responsive Image Map Generator
http://www.zaneray.com/responsive-image-map/

Générateurs d'« Image-Map » intégrés à des navigateurs comme extension

Image Map Editor 0.8.1 - Firefox Add-ons
by Heinz-Jürgen Boms
https://addons.mozilla.org/en-US/firefox/addon/ime/
- Die Sache mit den Image-Maps - August 2012
  http://www.hjb-seite.de/projekte/pro09.htm

Image Map Helperproposé par NGU TECHNOLOGY
Extension pour le navigateur Chrome de Google
https://chrome.google.com/webstore/detail/image-map-helper/kbkkdfamieongeeoifamkbdmaiggklpa

Test de Sept logiciels générateurs d'« Images-Maps » sous MS-Windows

François Daniel Giezendanner — 2017-02-09T18:04:33Z

Sommaire

Présentation

Les générateurs d'Images-Maps en général et de zones réactives (SHAPE : le type de zone de forme cercle, rectangle ou polygone) en particulier ont des fonctionnalités dont les performances varient d'un logiciel à l'autre. Nous avons testé rapidement (la vitesse de prise en main est importante du point de vue intuitivité) 7 logiciels à installer sous MS-Windows 7, nous les avons classé de 1 à 7 en fonction de leurs performances et de leur convivialité. Les paramètres évalués sont :

Zoom (x fois)
Création aisée et précise des zones
Dinstinction claire entre les points et les lignes
Possibilité d'ajouter et supprimer des points à une zone
Remaniement aisé et précis des zones
Images-Maps responsive

Remarque :
La présente évaluation est complétée par les tests de l'article : Test de Quatre logiciels générateurs d'« Images-Maps » sous MS-Windows .

Résultats

No	Paramètres	MapThis	GIMP	CoffeeCup	Fast Image Map 2	Handy Image Mapper	Meracl ImageMap Generator v3.5.3	X-Map
0	Logo
0	Classement	1	2	3	4	5	6	7
1	Zoom	8x	8x	2x	4x	Non	Non	Non
2	Création aisée et précise des zones	Oui	Oui	Oui	Oui	Oui	Non	Non
3	Distinction claire entre les points et les lignes	Oui	Non	Oui	Oui	Oui	Oui	Non
4	Possibilité d'ajouter et supprimer des points à une zone	Oui	Oui	Non	Non	Oui	Oui	Non
5	Remaniement aisé et précis des zones	Oui	Oui et Non	Oui	Oui	Oui	Non, compliqué	Non
6	Images-Maps responsive	Non	Non	Oui	Non	Non	Non	Non

1) MapThis

Zoom : 8x
Création aisée et précise des zones : Oui
Dinstinction claire entre les points et les lignes : Oui
Possibilité d'ajouter et supprimer des points à une zone : Oui
Remaniement aisé et précis des zones : Oui
Images-Maps responsive : Non

2) Gimp

Zoom : 8x
Création aisée et précise des zones : Oui
Dinstinction claire entre les points et les lignes : Non
Possibilité d'ajouter et supprimer des points à une zone : Oui
Remaniement aisé et précis des zones : Oui et Non
Images-Maps responsive : Non

3) CoffeeCup

Zoom : 2x
Création aisée et précise des zones : Oui
Dinstinction claire entre les points et les lignes : Oui
Possibilité d'ajouter et supprimer des points à une zone : Non
Remaniement aisé et précis des zones : Oui
Images-Maps responsive : Oui

4) Fast Image Map 2

Zoom : 4x
Création aisée et précise des zones : Oui
Dinstinction claire entre les points et les lignes : Oui
Possibilité d'ajouter et supprimer des points à une zone : Non
Remaniement aisé et précis des zones : Oui
Images-Maps responsive : Non

5) Handy Image Mapper

Zoom : Non
Création aisée et précise des zones : Non
Dinstinction claire entre les points et les lignes : Oui
Possibilité d'ajouter et supprimer des points à une zone : Oui
Remaniement aisé et précis des zones : Oui
Images-Maps responsive : Non

6) Meracl ImageMap Generator v3.5.3

Zoom : Non
Création aisée et précise des zones : Non
Dinstinction claire entre les points et les lignes : Oui
Possibilité d'ajouter et supprimer des points à une zone : Oui
Remaniement aisé et précis des zones : Non, compliqué
Images-Maps responsive : Non

7) X-Map

Zoom : Non
Création aisée et précise des zones : Non
Dinstinction claire entre les points et les lignes : Non
Possibilité d'ajouter et supprimer des points à une zone : Non
Remaniement aisé et précis des zones : Non
Images-Maps responsive : Non
Prise en main : pas intuitive, compliquée

Plugin jQuery Vector Maps

François Daniel Giezendanner — 2017-02-08T12:52:45Z

Sommaire

Présentation sommaire

Ce plugin permet d'avoir des rendus vectoriels (SVG) par l'intermédiaire de la librairie « jQuery Vector Maps » (JQVMAP). L'image SVG affichée est responsive.

Les zones réactives de l'Image Vector Maps sont illuminées au survol de la souris.

JQVMap is a jQuery plugin that renders Vector Maps. It uses resizable Scalable Vector Graphics (SVG) for modern browsers like Firefox, Safari, Chrome, Opera and Internet Explorer 9.

https://jqvmap.com/

Latest Release : v1.5.0 on March 15th, 2016


World Vector Map and View Source Code for this Example: Copie d'écran
Source : https://jqvmap.com/

Table des matières :

Préambule
Installation
Création de cartes
Créer des zones/vecteurs
Modèle fourni
Mise en ligne d'une carte
Exemple de rendu de carte SVG
Liste des cartes fournies par le plugin

Source et présentation détaillée

Plugin jQuery Vector Maps
24 septembre 2015 – par Sophie Drouvroy, Teddy Payet
https://contrib.spip.net/Plugin-jQuery-Vector-Maps-4724

jQuery Vector Maps v1.5.0
https://jqvmap.com/

Images Map responsives avec zones réactives illuminées

François Daniel Giezendanner — 2017-02-05T11:03:22Z

Quelques références sur des scripts jQuery pour des Images Map Responsives (RWD) dont deux avec zones réactives illuminées.

Sommaire

Sources RWD jQuery Image Maps avec zones « illuminées »

Responsive image maps with roll-overs
February 26, 2013
RWD of Matt Stow's responsive image jquery plugin
http://www.andensolutions.com/blog/responsiveImagePaths

stowball/jquery.rwdImageMaps-hilight.js
rwdImagesMaps modified to allow mapHilight (buggy)
stowball, Created 4 years ago
https://gist.github.com/stowball/5299593

Sources RWD jQuery Image Maps

Responsive Image Maps
Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window
https://responsivedesign.is/resources/javascript-jquery/responsive-image-maps
- Responsive Image Maps jQuery Plugin
  http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html

Responsive Image Map
https://avexdesigns.com/responsive-image-map/

jQuery-rwdImageMaps
Responsive Image Maps jQuery Plugin
stowball, 18 Oct 2016
https://github.com/stowball/jQuery-rwdImageMaps

image-map-resizer - Responsive HTML Image Maps
davidjbradshaw, 2 months ago
https://github.com/davidjbradshaw/image-map-resizer

image-map-resizer
Make the HTML image map responsive, so the map scales with the image
Copyright © 2014-15 David J. Bradshaw. Licensed under the MIT license.
https://www.npmjs.com/package/image-map-resizer
- Automagically resizing imageMap
  Resize window and the HTML ImageMap will scale with the image.
  http://davidjbradshaw.com/imagemap-resizer/example/
- Image Map Example
  http://html.cita.illinois.edu/text/map/map-example.php

Image Map Resizer
by David J. Bradshaw
Keep HTML Image Maps scaled to the size of an image. It detects the window being resized and updates the co-ordinates of the image map.
https://plugins.jquery.com/imageMapResizer/

Responsive Image Map Generator
Enter the path to an image in the field, add and reposition links over the image. As you make changes, HTML will output below with percentage based absolutely positioned elements.
http://www.zaneray.com/responsive-image-map/

Responsive Image Map Creator
http://image-map.weebly.com/

Responsive Image Hotspots Creator
http://www.inabrains.com/tooltip/image-hotspot-creator.html
http://www.inabrains.com/tooltip/examples/image-hotspot.html

« Image Map » JQuery MapHilight (zones illuminées au survol de la souris) de David Lynch appliqué à « La Carte des 26 cantons suisses » dans SPIP

François Daniel Giezendanner — 2017-02-01T17:31:40Z

JQuery maphilight (Map Hilight) est le script jquery créé par David Lynch. Ce script permet aux rédacteurs d'associer des zones de clic aux images. De plus, fait important, ce script permet de changer les couleurs, transparences, épaisseurs de traits et d'ajouter une ombre paramétrée pour les zones cliquables au survol de la souris, tout cela sans nécessiter la connaissance de javascript / jquery.

Dans cet article nous appliquons le code de l'exemple maphilight « demo_world » à l'image « La Carte des 26 cantons suisses ».

Sommaire

Préambule

En standard dans le squelette de SPIP 3.1 la largeur maximale des images est fixée à 672 pixel, en particulier dans le fichier article.html, lorsque cette largeur est plus grande elle est réduite à 672 pixels avec l'utilisation du filtre |image_reduire. Pour plus d'informations on consultera l'article Réduire la dimension des images avec le filtre |image_reduirelargeur,hauteur.

L'exemple maphilight « simple demo » appliqué ici à l'image « Les 26 cantons suisses » est totalement opérationnel sur grand écran avec une souris. Ce n'est pas le cas avec l'utilisation des tablettes (Ipad, etc.) et smartphones (Iphone, etc.).

Pour plus d'information sur le Plugin JQuery MapHilight de David Lynch on consultera l'article : « Image Map » JQuery MapHilight (zones illuminées au survol de la souris) de David Lynch appliqué à l'image « Louve Capitoline » dans SPIP.

MapHilight des 26 cantons suisses

Les informations fournies pour cette image interactive des 26 cantons suisses sont tirées de l'article Wikipédia : Canton suisse.

Source image : Document Wikipedia Canton suisse SVG.

jQuery maphilight documentation

Les 26 zones cliquables ont été créées avec le filtre du logiciel GIMP : Filtres, Web, Image cliquable Web...

Cette « Image MapHilight » de la carte des 26 cantons de la Suisse présente sous forme graphique interactive (Infobulle qui apparaissent au survol de la souris) toute l'information présentée dans le tableau ci-dessous.

L'attribution des couleurs & opacités des contours et des fonds, épaisseurs des contours et ombres paramétrées pour les zones réactives est appliquée en une fois à l'ensemble des zones réactives dans le javascript avec la série d'instructions :

 fade: false, 
 fillColor: '008800', 
 strokeColor: '0000ff', 
 strokeWidth: 2, 
 fillOpacity: 0.2,
 shadow: true,
 shadowX: 7,
 shadowY: 7,
 shadowRadius: 6,
 shadowColor: '000000',
 shadowOpacity: 0.5,
 shadowPosition: 'outside',
 shadowFrom: false

Ce qui donne :

La documentation du plugin maphilight et présentée dans l'article « jQuery maphilight documentation », lequel propose quatre exemples d'utilisation du plugin. Ici nous appliquons le code de l'exemple « A map of the world » à l'image « Les 26 cantons suisses ».

Données cantonales

Source : Wikipédia Canton suisse

No	Abr.	CANTON	Depuis	Chef-lieu	Population [décembre 2014]	Population [en % du total suisse]	Superficie [en km²]	Superficie [en % du total suisse]	Densité [en hab./km²]	Nombre de Communes	Langue officielle
1	AG	Argovie (Aargau)	1803	Aarau	635797	7.8	1403.73	3.4	452.9	220	allemand
2	AI	Appenzell Rhodes-Intérieures (Appenzell Innerrhoden)	1513	Appenzell	15778	0.2	172.52	0.4	91.5	6	allemand
3	AR	Appenzell Rhodes-Extérieures (Appenzell Ausserrhoden)	1513	Herisau	53017	0.7	242.86	0.6	218.3	20	allemand
4	BE	Berne (Bern)	1353	Berne	1001281	12.3	5959.44	14.4	168	383	allemand ; français
5	BL	Bâle-Campagne (Basel-Landschaft)	1501	Liestal	275536	3.4	517.56	1.3	532.4	86	allemand
6	BS	Bâle-Ville (Basel-Stadt)	1501	Bâle	187898	2.3	37	0.1	5078.3	3	allemand
7	FR	Fribourg (Freiburg)	1481	Fribourg	303377	3.7	1670.7	4	181.6	167	français ; allemand
8	GE	Genève	1815	Genève	490578	6	282.48	0.7	1736.7	45	français
9	GL	Glaris (Glarus)	1352	Glaris	38479	0.5	685.3	1.7	56.1	3	allemand
10	GR	Grisons (Graubünden ; Grischun ; Grigioni)	1803	Coire	192621	2.4	7105.44	17.2	27.1	178	allemand ; romanche ; italien
11	JU	Jura	1979	Delémont	71738	0.9	838.55	2	85.6	64	français ; allemand (1 commune)
12	LU	Lucerne (Luzern)	1332	Lucerne	377610	4.6	1493.44	3.6	252.8	87	allemand
13	NE	Neuchâtel (Neuenburg)	1815	Neuchâtel	176241	2.2	802.93	1.9	219.5	53	français
14	NW	Nidwald (Nidwalden)	1291	Stans	41024	0.5	275.9	0.7	148.7	11	allemand
15	OW	Obwald (Obwalden)	1291	Sarnen	35585	0.4	490.59	1.2	72.5	7	allemand
16	SG	Saint-Gall (St. Gallen)	1803	Saint-Gall	478907	5.9	2025.54	4.9	236.4	85	allemand
17	SH	Schaffhouse (Schaffhausen)	1501	Schaffhouse	76356	0.9	298.42	0.7	255.9	27	allemand
18	SO	Soleure (Solothurn)	1481	Soleure	261437	3.2	790.49	1.9	330.7	121	allemand
19	SZ	Schwytz (Schwyz)	1291	Schwytz	146730	1.8	906.92	2.2	161.8	30	allemand
20	TG	Thurgovie (Thurgau)	1803	Frauenfeld	244330	3	991.02	2.4	246.5	80	allemand
21	TI	Tessin (Ticino)	1803	Bellinzone	335720	4.1	2812.2	6.8	119.4	157	italien
22	UR	Uri	1291	Altdorf	35422	0.4	1076.57	2.6	32.9	20	allemand
23	VD	Vaud	1803	Lausanne	755369	9.3	3212.03	7.8	235.2	318	français
24	VS	Valais (Wallis)	1815	Sion	327011	4	5224.25	12.7	62.6	141	français ; allemand
25	ZG	Zoug (Zug)	1352	Zoug	113105	1.4	238.69	0.6	473.9	11	allemand
26	ZH	Zurich (Zürich)	1351	Zurich	1371007	16.8	1729	4.2	792.9	171	allemand

Code utilisé




 
 jQuery maphilight documentation
 
 
 








Chef-lieu : Genève, 

Population (décembre 2014) : 490'578, 

Population (en % du total suisse) : 6.0, 

Superficie (en km²) : 282.48, 

Superficie (en % du total suisse) : 0.7, 

Densité (en hab./km²) : 1'736.7, 

Nombre de Communes : 45, 

Langue officielle : français." />


Chef-lieu : Lausanne, 

Population (décembre 2014) : 755'369, 

Population (en % du total suisse) : 9.3, 

Superficie (en km²) : 3'212.03, 

Superficie (en % du total suisse) : 7.8, 

Densité (en hab./km²) : 235.2, 

Nombre de Communes : 318, 

Langue officielle : français." />


Chef-lieu : Sion, 

Population (décembre 2014) : 327'011, 

Population (en % du total suisse) : 4.0, 

Superficie (en km²) : 5'224.25, 

Superficie (en % du total suisse) : 12.7, 

Densité (en hab./km²) : 62.6, 

Nombre de Communes : 141, 

Langue officielle : français, allemand." />


Chef-lieu : Neuchâtel, 

Population (décembre 2014) : 176'241, 

Population (en % du total suisse) : 2.2, 

Superficie (en km²) : 802.93, 

Superficie (en % du total suisse) : 1.9, 

Densité (en hab./km²) : 219.5, 

Nombre de Communes : 53, 

Langue officielle : français." />


Chef-lieu : Fribourg, 

Population (décembre 2014) : 303'377, 

Population (en % du total suisse) : 3.7, 

Superficie (en km²) : 1'670.70, 

Superficie (en % du total suisse) : 4, 

Densité (en hab./km²) : 181.6, 

Nombre de Communes : 167, 

Langue officielle : français, allemand." />


Chef-lieu : Berne, 

Population (décembre 2014) : 1'001'281, 

Population (en % du total suisse) : 12.3, 

Superficie (en km²) : 5'959.44, 

Superficie (en % du total suisse) : 14.4, 

Densité (en hab./km²) : 168, 

Nombre de Communes : 383, 

Langue officielle : allemand, français." />


Chef-lieu : Bellinzone, 

Population (décembre 2014) : 335'720, 

Population (en % du total suisse) : 4.1, 

Superficie (en km²) : 2'812.20, 

Superficie (en % du total suisse) : 6.8, 

Densité (en hab./km²) : 119.4, 

Nombre de Communes : 157, 

Langue officielle : italien." />


Chef-lieu : Delémont, 

Population (décembre 2014) : 71'738, 

Population (en % du total suisse) : 0.9, 

Superficie (en km²) : 838.55, 

Superficie (en % du total suisse) : 2, 

Densité (en hab./km²) : 85.6, 

Nombre de Communes : 64, 

Langue officielle : français, allemand (1 commune)." />


Chef-lieu : Coire, 

Population (décembre 2014) : 192'621, 

Population (en % du total suisse) : 2.4, 

Superficie (en km²) : 7'105.44, 

Superficie (en % du total suisse) : 17.2, 

Densité (en hab./km²) : 27.1, 

Nombre de Communes : 178, 

Langue officielle : allemand, romanche, italien." />


Chef-lieu : Zurich, 

Population (décembre 2014) : 1'371'007, 

Population (en % du total suisse) : 16.8, 

Superficie (en km²) : 1'729.00, 

Superficie (en % du total suisse) : 4.2, 

Densité (en hab./km²) : 792.9, 

Nombre de Communes : 171, 

Langue officielle : allemand." />


Chef-lieu : Aarau, 

Population (décembre 2014) : 635'797, 

Population (en % du total suisse) : 7.8, 

Superficie (en km²) : 1'403.73, 

Superficie (en % du total suisse) : 3.4, 

Densité (en hab./km²) : 452.9, 

Nombre de Communes : 220, 

Langue officielle : allemand." />


Chef-lieu : Lucerne, 

Population (décembre 2014) : 377'610, 

Population (en % du total suisse) : 4.6, 

Superficie (en km²) : 1'493.44, 

Superficie (en % du total suisse) : 3.6, 

Densité (en hab./km²) : 252.8, 

Nombre de Communes : 87, 

Langue officielle : allemand." />


Chef-lieu : Herisau, 

Population (décembre 2014) : 53'017, 

Population (en % du total suisse) : 0.7, 

Superficie (en km²) : 242.86, 

Superficie (en % du total suisse) : 0.6, 

Densité (en hab./km²) : 218.3, 

Nombre de Communes : 20, 

Langue officielle : allemand." />


Chef-lieu : Appenzell, 

Population (décembre 2014) : 15'778, 

Population (en % du total suisse) : 0.2, 

Superficie (en km²) : 172.52, 

Superficie (en % du total suisse) : 0.4, 

Densité (en hab./km²) : 91.5, 

Nombre de Communes : 6, 

Langue officielle : allemand." />


Chef-lieu : Saint-Gall, 

Population (décembre 2014) : 478'907, 

Population (en % du total suisse) : 5.9, 

Superficie (en km²) : 2'025.54, 

Superficie (en % du total suisse) : 4.9, 

Densité (en hab./km²) : 236.4, 

Nombre de Communes : 85, 

Langue officielle : allemand." />


Chef-lieu : Frauenfeld, 

Population (décembre 2014) : 244'330, 

Population (en % du total suisse) : 3.0, 

Superficie (en km²) : 991.02, 

Superficie (en % du total suisse) : 2.4, 

Densité (en hab./km²) : 246.5, 

Nombre de Communes : 80, 

Langue officielle : allemand." />


Chef-lieu : Schaffhouse, 

Population (décembre 2014) : 76'356, 

Population (en % du total suisse) : 0.9, 

Superficie (en km²) : 298.42, 

Superficie (en % du total suisse) : 0.7, 

Densité (en hab./km²) : 255.9, 

Nombre de Communes : 27, 

Langue officielle : allemand." />


Chef-lieu : Liestal, 

Population (décembre 2014) : 275'536, 

Population (en % du total suisse) : 3.4, 

Superficie (en km²) : 517.56, 

Superficie (en % du total suisse) : 1.3, 

Densité (en hab./km²) : 532.4, 

Nombre de Communes : 86, 

Langue officielle : allemand." />


Chef-lieu : Bâle, 

Population (décembre 2014) : 187'898, 

Population (en % du total suisse) : 2.3, 

Superficie (en km²) : 37.00, 

Superficie (en % du total suisse) : 0.1, 

Densité (en hab./km²) : 5'078.3, 

Nombre de Communes : 3, 

Langue officielle : allemand." />


Chef-lieu : Soleure, 

Population (décembre 2014) : 261'437, 

Population (en % du total suisse) : 3.2, 

Superficie (en km²) : 790.49, 

Superficie (en % du total suisse) : 1.9, 

Densité (en hab./km²) : 330.7, 

Nombre de Communes : 121, 

Langue officielle : allemand." />


Chef-lieu : Altdorf, 

Population (décembre 2014) : 35'422, 

Population (en % du total suisse) : 0.4, 

Superficie (en km²) : 1'076.57, 

Superficie (en % du total suisse) : 2.6, 

Densité (en hab./km²) : 32.9, 

Nombre de Communes : 20, 

Langue officielle : allemand." />


Chef-lieu : Sarnen, 

Population (décembre 2014) : 35'585, 

Population (en % du total suisse) : 0.4, 

Superficie (en km²) : 490.59, 

Superficie (en % du total suisse) : 1.2, 

Densité (en hab./km²) : 72.5, 

Nombre de Communes : 7, 

Langue officielle : allemand." />


Chef-lieu : Stans, 

Population (décembre 2014) : 41'024, 

Population (en % du total suisse) : 0.5, 

Superficie (en km²) : 275.90, 

Superficie (en % du total suisse) : 0.7, 

Densité (en hab./km²) : 148.7, 

Nombre de Communes : 11, 

Langue officielle : allemand." />


Chef-lieu : Zoug, 

Population (décembre 2014) : 113'105, 

Population (en % du total suisse) : 1.4, 

Superficie (en km²) : 238.69, 

Superficie (en % du total suisse) : 0.6, 

Densité (en hab./km²) : 473.9, 

Nombre de Communes : 11, 

Langue officielle : allemand." />


Chef-lieu : Schwytz, 

Population (décembre 2014) : 146'730, 

Population (en % du total suisse) : 1.8, 

Superficie (en km²) : 906.92, 

Superficie (en % du total suisse) : 2.2, 

Densité (en hab./km²) : 161.8, 

Nombre de Communes : 30, 

Langue officielle : allemand." />


Chef-lieu : Glaris, 

Population (décembre 2014) : 38'479,

Population (en % du total suisse) : 0.5, 

Superficie (en km²) : 685.30, 

Superficie (en % du total suisse) : 1.7, 

Densité (en hab./km²) : 56.1, 

Nombre de Communes : 3, 

Langue officielle : allemand." />

Sources

Canton suisse
https://fr.wikipedia.org/wiki/Canton_suisse

« Image Map » JQuery MapHilight (zones illuminées au survol de la souris) de David Lynch appliqué à « La Carte du monde » dans SPIP

François Daniel Giezendanner — 2017-01-26T18:00:01Z

Dans cet article nous appliquons le code de l'exemple maphilight « demo_world » à l'image « La Carte du monde ».

Sommaire

Préambule

L'exemple maphilight « simple demo » appliqué ici à l'image « Les pays du Monde (demo_world.png) » est totalement opérationnel sur grand écran avec une souris. Ce n'est pas le cas avec l'utilisation des tablettes (Ipad, etc.) et smartphones (Iphone, etc.).

La définition des en général et des coordonnées coords="36,377, 37,376, ... en particulier pour les zones réactives de forme polygonales (n couples x,y) pour chaque pays comporte un certain nombre de « défauts » qui ne gênent pas dans le fonctionnement de l'application html pure mais entraine des dysfonctionnements lors de l'intégration à SPIP. Nous avons purgé autant que faire se peut « défauts » sans pouvoir tous les éliminer, il en résulte une carte opérationnelle avec quelques dysfonctionnements pour quelques pays.


Pour plus d'information sur le Plugin JQuery MapHilight de David Lynch on consultera l'article : « Image Map » JQuery MapHilight (zones illuminées au survol de la souris) de David Lynch appliqué à l'image « Louve Capitoline » dans SPIP.
  MapHilight de « La Carte du monde »
SVG world maps are really helpful for demoing this thing. SVG world map available on Wikipedia, Try the insanely huge.
Voir l'article : Réduire la dimension des images avec le filtre |image_reduirelargeur,hauteur
   jQuery maphilight documentation   


                                                                                                                                                        
                                                     
                                                                               
 changer les couleurs, transparences, épaisseurs de traits et d'ajouter une ombre paramétrée pour les zones cliquables
L'attribution des couleurs de trait et de fond, épaisseur de trait et opacité ainsi que l'ajout d'une ombre paramétrée pour les zones réactives est appliquée à l'ensemble des zones réactives dans le javascript avec l'instruction :
fade: false, fillColor: '008800', strokeColor: '0000ff', strokeWidth: 2, fillOpacity: 0.2
Ce qui donne :

La documentation du plugin maphilight et présentée dans l'article « jQuery maphilight documentation », lequel propose quatre exemples d'utilisation du plugin. Ici nous appliquons le code de l'exemple « A map of the world » à l'image « demo_world ».
 Code utilisé



 
 jQuery maphilight documentation



Zones cliquables sur une image (Images Map)
François Daniel Giezendanner — 2017-01-15T13:17:11Z

		   Sommaire 
   Préambule
Introduction
Carte - map : Images et (...)
Afficher des images
Images réactives
Les zones cliquables
L'attribut TARGET
Syntaxe d'une zone réactive
Zone circulaire
Zone rectangulaire
Zone polygonale
Map complète avec les trois
Sources
 
 
 
 Préambule
1) Cet article est une copie de l'article :
 Zones cliquables sur une image (Images Map)

vendredi 10 juin 2011 par François Daniel Giezendanner

http://icp.ge.ch/sem/cms-spip/spip.php?article1364
2) Le thème développé ici est repris dans l'article « Créer une « Image Réactive » en associant une « Image Map » à une Image » de manière complémentaire.
 Introduction
Nous voulons créer dans le champ texte des articles, brèves et rubriques SPIP des images avec plusieurs zones cliquables qui sont autant de liens vers diverses destinations intra et extra site.
Avant de donner des exemples concrets dans SPIP, nous passons rapidement en revue la syntaxe à utiliser de manière nécessaire et suffisante et renvoyons cependant ceux qui veulent plus de détail vers une littérature encore plus détaillée.
Une application de la méthode présentée ici est donnée dans l'article :
 Exemple « d'Image Map » et de « jump menu » avec une carte des CO du canton de Genève
 Carte - map : Images et images réactives dans une page Web
L'image est affichée avec la balise  et les zones réactives sur cette image sont définies avec la balise  (=carte en français). la balise  permet ainsi à partir d'une seule image de proposer un panel de différentes destinations internes comme externes à la page web. Elle est utile pour de nombreuses situations, en particulier pour les menus graphiques.
 Afficher des images
Les images doivent être au format : JPEG, PNG ou GIF
La balise IMG du langage HTML permet d'insérer des images dans une page Web
Les principaux attributs de la balise IMG sont les suivants :
 SRC : Indique l'emplacement (URL) de l'image (il est obligatoire), spécifier l'URL complète de l'image.
 ALIGN : Spécifie l'alignement de l'image par rapport au texte adjacent. Il peut prendre les valeurs : TOP, MIDDLE, et BOTTOM (au-dessus, au milieu et en-dessous).
 ALT : Permet d'afficher un texte alternatif lorsque l'image ne s'affiche pas (l'utilité première du ALT est de remplacer l'image dans les navigateurs non graphiques).
 TITLE : Permet d'afficher une infobulle lors du survol de l'image par le curseur.
 WIDTH : Permet de spécifier la largeur de l'image.
 HEIGHT : Permet de spécifier la hauteur de l'image.
Exemple de balise pour insérer une image :

 Images réactives
Les zones cliquables sont créées sur la surface même de l'image grâce à l'attribut USEMAP utilisé conjointement avec la balise <MAP>.
L'attribut USEMAP de la balise <IMG> pointe vers une balise
 contenant la description du découpage de l'image en zones cliquables. Par exemple pour une MAP dont le nom est riviere, la balise pour insérer une image est :

La balise <MAP> a un attribut NAME définissant son nom (NAME=« nom ») et contient les zones cliquables déclarées grâce à des balises AREA. Dans notre exemple on écrira :

 Les zones cliquables
A une zone réactive est associée une balise <AREA> dont les attributs sont :
 NAME : le nom de la zone.
 SHAPE : le type de zone (cercle, rectangle ou polygone).
 COORDS : les coordonnées de la zone (séparées par des virgules).
 HREF : l'adresse de destination (URL).
 NOHREF : spécifie qu'une zone n'a pas de lien associé.
 ALT : le commentaire qui apparaitra lorsque le curseur de la souris passera sur la zone.
 TITLE : infobulle lors du survol de l'image par le curseur.
 TARGET : _top, _self, _blank, _parent ou nom.
 L'attribut TARGET
Cet attribut est assez souvent utilisé. Il permet de dire au navigateur où ouvrir le lien (nouvelle fenêtre, fenêtre principale, fenêtre nommée...). Les 5 valeurs possibles de cet attribut sont les suivantes :
 _top : ouvre le lien (page cible) dans la fenêtre principale du navigateur
 _self : ouvre le lien (page cible) dans la fenêtre courante (la fenêtre d'appel)
 _blank : ouvre le lien (page cible) dans une nouvelle fenêtre sans nom
 _parent : ouvre le lien (page cible) dans la frame parent
 nom : ouvre le lien (page cible) dans la frame de nom « nom » (valeur de l'attribut name)
 Syntaxe d'une zone réactive

 Zone circulaire
Une zone circulaire est définie par la balise  et dont l'attribut COORDS prend pour valeurs la liste des abscisse, ordonnée à l'origine du centre et le rayon du cercle.
En d'autres termes, les coordonnées du cercle sont : « centre-x, centre-y, rayon »
Syntaxe :

Exemple :






 Zone rectangulaire
Une zone rectangulaire est définie par la balise  et dont l'attribut COORDS prend pour valeurs les coordonnées des coins supérieur gauche et inférieur droit séparées par des virgules.
En d'autres termes, les coordonnées du Rectangle sont : « gauche-x, haut-y, droite-x, bas-y »
Syntaxe :

Exemple :






 Zone polygonale
Une zone polygonale est définie par la balise  et dont l'attribut COORDS prend pour valeurs la liste des abscisse et ordonnée à l'origine de chacun des points.
En d'autres termes, les coordonnées du polygone sont : « la suite des coordonnées x, y des points définisant le polygone séparées par des virgules »
Syntaxe :

Exemple :






 Map complète avec les trois zones réactives










 Sources
 13.6 Image maps selon w3.org
http://www.w3.org/TR/html4/struct/objects.html#h-13.6
 
http://www.faqs.org/docs/htmltut/images/_MAP.html
 How to Make an Image Map
http://www.faqs.org/docs/htmltut/images/images_famsupp_220.html
 Creating HTML Image Maps
This tutorial is written and contributed by Nebojsa Pajkic
http://www.javascriptkit.com/howto/imagemap.shtml
 V. Images et zones réactives
Par Hugo ETIEVANT
http://cyberzoide.developpez.com/html/map.php3
 Gestion des images en HTML
http://www.commentcamarche.net/contents/html/htmlimages.php3
 HTML  Tag
http://www.w3schools.com/tags/tag_area.asp
 HTML area tag
http://www.htmlquick.com/reference/tags/area.html
 HTML - Exploiter une « image-map »
http://www.thelin.net/laurent/labo/html/imagemap.html
 Image Maps
http://www.osp.state.nc.us/trancata/computer/webaid/imagemaps.html


Créer une « Image Réactive » en associant une « Image Map » à une Image
François Daniel Giezendanner — 2017-01-14T10:13:12Z

		   Sommaire 
   Préambule
Introduction
L'« Image Map » et l'« Image
 à l'image  avec les attributs name et (...)" href='http://icietla-ge.ch/voir/spip.php?id_rubrique=56&page=backend#outil_sommaire_3'>Associer la map  à
Précisions concernant les (...)
« Image Réactive » (ou « (...)
Sept exemples issus d'articles
Exemple 1. Image Map : (...)
 HTML5 – Zone cliquable ou lien dans une image" href='http://icietla-ge.ch/voir/spip.php?id_rubrique=56&page=backend#outil_sommaire_8'>Exemple 2. Balise 

Exemple 3. Balise MAP : (...)
Exemple 4. Les images map (...)
Exemple 5. usemap (HTML (...)
Exemple 6. Images mappées (...)
 et " href='http://icietla-ge.ch/voir/spip.php?id_rubrique=56&page=backend#outil_sommaire_13'>Exemple 7. Les balises (...)
Références
Sources des exemples, document
" href='http://icietla-ge.ch/voir/spip.php?id_rubrique=56&page=backend#outil_sommaire_16'>Outils pour créere des 
 
 
 

 Préambule
Le thème développé ici complète celui traité dans l'article « Zones cliquables sur une image (Images Map) ».
 Introduction
Nous montrons ici comment utiliser les balises ,  et  pour créer des « Image Réactive ».
La description et l'élaboration détaillées d'« Image Map » sont données dans les articles présentés succinctement ci-dessous avec leur exemple.
 L'« Image Map » et l'« Image Réactive » selon W3C
L'« Image Map » et l'« Image Réactive » sont décrites en détail dans les documents du W3C « 13. Les objets, les images et les applets - 13.6. Les images cliquables » et/ou « HTML 4.01 Specification - W3C Recommendation 24 December 1999 - 6. Image maps » (Voir aussi « HTML5 : A vocabulary and associated APIs for HTML and XHTML » : « 4.8.12 The map element », « 4.8.13 The area element » et « 4.8.14 Image maps »). Nous en présentons un exemple ici :



 
 
 
 

 Associer la map  à l'image  avec les attributs name et usemap
L'image  contient une attribut spécial usemap. Celui-ci doit désigner avec un nom unique et sans espace la carte imagée. C'est ce nom qu'on placera dans cet attribut usemap, ici usemap=« #carte1 ». Remarquez l'utilisation du symbole # (Cf. la remarque 2 ci-dessous)).
On active les régions actives avec l'élément . Celui-ci n'a besoin que d'un seul attribut : name dont la valeur doit correspondre à celle utilisée pour l'attribut usemap vue juste avant : . C'est dans cet élément  que l'on définira les éléments  qui définissent les zones réactives.
Ainsi la « Carte d'Image » (« Image Map ») définie par la balise  et l'Image définie par la balise  sont associées par le fait que l'attribut name de la balise  et l'attribut usemap de la balise  ont la même valeur, ici « #carte1 ».
En d'autres termes, si la valeur de l'attribut name de la « Carte d'Image » (« Image Map »)  est par exemple « carte1 », alors la valeur de l'attribut usemap de l'image  doit être « #carte1 ».
Remarque 1 :

C'est la balise  qui permet de créer une « Carte d'Image », et elle prend deux arguments obligatoires :
 name : c'est le nom de la map (il doit être unique).
 id : c'est l'id de la map (unique aussi). À vrai dire, il n'a pas vraiment d'utilité, mais il est obligatoire pour respecter les normes W3C.
Remarque 2 :

Pourquoi met-on un # (ici l'attribut usemap=« #carte1 » dans l'image ) ?

Tout simplement parce que les maps sont considérées comme des ancres.
On peut donc mettre un argument tel que « autre_page.html#ma_map » pour une « Carte d'Image » (« Image Map ») se trouvant sur une autre page !
 Précisions concernant les attributs alt et title
L'article « 13. Les objets, les images et les applets - 13.6. Les images cliquables » précise :
alt = texte [CS : Case Sensitive]

Cet attribut spécifie un texte de remplacement pour les agents utilisateurs qui sont incapables d'afficher les images, les formulaires ou les applets. La langue du texte de remplacement est spécifiée par l'attribut lang.
title (titre de l'élément) [CS : Case Sensitive]

Cet attribut fournit des informations consultatives concernant l'élément sur lequel il se place.

l'attribut title peut annoter un nombre quelconque d'éléments. Veuillez consulter la définition de l'élément pour vérifier si celui-ci gère cet attribut.
Les agents utilisateurs peuvent restituer les valeurs des attributs title de diverses façons. Les navigateurs visuels peuvent, par exemple, afficher leur valeur sous la forme d'une « infobulle » (un bref message qui apparaît quand le dispositif de pointage reste au-dessus d'un objet). Dans le même ordre d'idée, les agents utilisateurs sonores peuvent vocaliser les informations de titre. Par exemple, le placement de l'attribut sur un lien permet aux agents utilisateurs (visuels et non-visuels) d'indiquer à l'utilisateur la nature de la ressource reliée.
Afficher des informations sur les éléments de l'image
Comment faire pour afficher des messages quand la souris passe sur une zone délimitée dans l'image ?
On ajoute simplement un attribut title à une zone. La balise </code> devient contextuelle et s'applique aux élément définis à l'intérieur de l'image, par des balises <code class='spip_code' dir='ltr'><area></code>.</p>
<div style='text-align: left;' class='spip_code' dir='ltr'><code><map name="map1"><br /> <area href="" shape="rect" coords="0,0,120,120" title="Message contextuel" ><br />
</map></code></div><hr class="spip" /><h3 class="spip" id="outil_sommaire_5"><a title="Sommaire" href='http://icietla-ge.ch/voir/spip.php?id_rubrique=56&page=backend#outil_sommaire' class="sommaire_ancre"> </a>« Image Réactive » (ou « Images Cliquables ») = Image + « Carte d'Image »</h3>
<p><strong>L'Image</strong></p>
<p>L'insertion d'images dans une page web est courante, banale.<br class='autobr' />
l'attribut usemap=« #carte1 » Permet de dire que l'image est une image réactive coté client, et désigne avec un nom unique et sans espace la « Carte d'Image » décrivant les zones réactives de l'image.</p>
<p><code class='spip_code' dir='ltr'></code></p>
<p><strong>La « Carte d'Image »</strong><br class='autobr' />
Une « Carte d'Image » est aussi appelée « Image Map », « imagemap » ou « Webmaps ».</p>
<p>Une « Carte d'Image » est définie avec les deux balises <code class='spip_code' dir='ltr'><map></map></code> et <code class='spip_code' dir='ltr'><area /></code>.</p>
<p><strong>La Balise <code class='spip_code' dir='ltr'><map></map></code></strong></p>
<p>La balise <code class='spip_code' dir='ltr'><map></map></code> permet de déclarer que ce qui est entre la balise <code class='spip_code' dir='ltr'><map></code> d'ouverture et la balise <code class='spip_code' dir='ltr'></map></code> de fermeture, est une description de plusieurs zones définies avec des balises <code class='spip_code' dir='ltr'><area /></code>.</p>
<div style='text-align: left;' class='spip_code' dir='ltr'><code><map name="carte1" id="carte1"><br /> <area shape="rect" coords="92,19,261,66" href="page-contact.html" alt="Contact" /><br /> <area shape="circle" coords="314,105,44" href="page-faq.html" alt="FAQ" /><br /> <area shape="poly" coords="18,100,42,83,190,103,183,148,36,132" href="page-home.html" alt="Accueil" /><br /> <area shape=... ... /><br /> ...<br />
</map></code></div>
<p>L'attribut name=« carte1 » de la Balise <code class='spip_code' dir='ltr'><map></code> donne un nom à la « Carte d'Image ». Lorsqu'une image utilisera cette « Carte d'image », c'est ce nom qui devra être mentionné comme valeur de l'attribut usemap.</p>
<p>Une « Carte d'Image » est donc définie par l'ensemble des balises <code class='spip_code' dir='ltr'><area shape=... ... /></code> et les balises balise <code class='spip_code' dir='ltr'><map></map></code> qui les entourent.</p>
<p><strong>La Balise <code class='spip_code' dir='ltr'><area /></code></strong></p>
<p>Cette balise permet de définir une zone réactive et le lien qui sera utilisé lorsque l'utilisateur activera la zone. Cette zone réactive est sensible au survol et au clique de la souris.<br class='autobr' />
Si plusieurs zone réactives distinctes mènent vers un même lien, elles doivent être définies dans des balises <code class='spip_code' dir='ltr'><area /></code> différentes.<br class='autobr' />
La balise area n'étant qu'une description, elle est fermée dans la balise d'ouverture.</p>
<p> <code class='spip_code' dir='ltr'><area shape="rect" coords="80,0,145,70" href="http://google.fr" alt="Google" target="_BLANK" /></code></p>
<p><strong>Les attributs de la Balise <code class='spip_code' dir='ltr'><area /></code> :</strong></p>
<ul class="spip"><li> <strong>coords</strong>=« ... » : coordonnées délimitant la zone réactive. Les coordonnées à inscrire changent suivant la valeur de l'attribut shape. Les valeurs à utiliser sont donc indiquées ci-dessous suite à chaque valeur de l'attribut shape. Les coordonnées sont indiquées point par point, en commençant par les coordonnées verticales, puis horizontales. Chaque valeur est séparée par des virgules. Les valeurs peuvent être exprimées en pixels ou en pourcentage de la largeur/hauteur de l'image.</li><li> <strong>shape</strong>=« ... » : définit le type de la zone réactive :
<ul class="spip"><li> <strong>rect</strong> : zone de type rectangle. Les valeurs à inscrire dans l'attribut coords correspondent aux coordonnées de 2 points situés à 2 angles opposés du rectangle (soit 4 valeurs).</li><li> <strong>circle</strong> : la zone est un cercle. Les valeurs à inscrire dans l'attribut coords sont les coordonnées du centre du cercle, suivit du rayon du cercle (soit 3 valeurs).</li><li> <strong>poly</strong> : la zone est un polygone. Ce polygone peut avoir autant de coté que vous le désirez. Les valeurs à inscrire dans l'attribut coords sont les coordonnées de chaque point situé à un angle de la zone, dans l'ordre de parcourt du périmètre. Le dernier point définit sera automatiquement relié au premier point définit.</li><li> <strong>default</strong> : toute zone qui n'a pas été définie avec l'une des 3 valeurs précédentes utilisera cette zone qui couvre donc l'ensemble de l'image (sauf les zones définies avec l'une des 3 autres valeurs). L'attribut coords n'a pas a être définit.</li></ul></li><li> <strong>href</strong>=« URL » : Lien hypertexte vers lequel pointe la zone réactive.</li><li> <strong>target</strong>=« ... » : zone d'affichage du lien.
<ul class="spip"><li> <strong>nom d'un cadre</strong> : La page ciblée par le lien s'affichera dans le cadre dont vous aurez donné le nom comme valeur dans l'attribut name de celui-ci .(si toutefois celui-ci existe).</li><li> <strong>_blank</strong> : La page ciblée par le lien s'affichera dans une nouvelle fenêtre.</li><li> <strong>_parent</strong> : La page s'affiche en occupant la place qu'occupe le cadre qui définit le cadre ou se trouve de la page actuelle.</li><li> <strong>_self</strong> : La page s'affichera dans la fenêtre ou le cadre ou se situe l'image réactive.</li><li> <strong>_top</strong> : La page s'affichera dans la fenêtre ouverte actuellement en occupant toute la fenêtre (ceci fera disparaître les éventuels cadres de la fenêtre).</li></ul></li><li> <strong>nohref</strong>=« ... » : la zone définie n'est pas réactive. Il ne se passera donc rien si l'utilisateur sélectionne cette zone.</li><li> <strong>alt</strong>=« ... » : permet de donner un nom à la zone (ce nom sera utilisé par les navigateurs nom graphique).</li><li> <strong>tabindex</strong> :« ... » : la touche « tab » permet de passer d'une zone à une autre grâce au clavier. Cet attribut définit l'ordre dans lequel la zone sera sélectionné lorsque l'utilisateur utilisera la touche de tabulation.</li></ul>
<p><strong>« Image Réactive » = « Carte d'image » associée à une image</strong></p>
<p>Une « Image Réactive » (ou « Images Cliquables ») est l'association d'une « Carte d'image » à une Image. Il en résulte une image présentant plusieurs zones réactives qui ont des propriétés différentes. Généralement, chaque zone réactive définie dans une « Carte d'Image » permet lorsqu'elle est sélectionnée d'accéder à une page web différente.</p>
<hr class="spip" /><h3 class="spip" id="outil_sommaire_6"><a title="Sommaire" href='http://icietla-ge.ch/voir/spip.php?id_rubrique=56&page=backend#outil_sommaire' class="sommaire_ancre"> </a>Sept exemples issus d'articles détaillés</h3><hr class="spip" /><h3 class="spip" id="outil_sommaire_7"><a title="Sommaire" href='http://icietla-ge.ch/voir/spip.php?id_rubrique=56&page=backend#outil_sommaire' class="sommaire_ancre"> </a>Exemple 1. Image Map : Liens dans une d'image</h3><div style='text-align: left;' class='spip_code' dir='ltr'><code><map name="hollywood" id="hollywood"><br /> <area href="#" shape="rect" coords="13,63,84,150" title="Gwynneth Paltrow" /><br /> <area href="#" shape="rect" coords="110,160,190,260" title="Naomi Watts" /><br /> <area href="#" shape="rect" coords="170,10,250,110" title="Salma Hayeck" /><br /> <area href="#" shape="rect" coords="300,30,380,130" title="Kirsten Dunst" /><br /> <area href="#" shape="rect" coords="250,260,340,370" title="Jennifer Aniston" /><br />
</map><br />
</code></div><ul class="spip"><li> <strong>Image Map : Liens dans une d'image</strong><br class='autobr' />
<a href="http://www.xul.fr/ecmascript/image-map.php" class='spip_url spip_out auto' rel='nofollow external'>http://www.xul.fr/ecmascript/image-map.php</a></li></ul><hr class="spip" /><h3 class="spip" id="outil_sommaire_8"><a title="Sommaire" href='http://icietla-ge.ch/voir/spip.php?id_rubrique=56&page=backend#outil_sommaire' class="sommaire_ancre"> </a>Exemple 2. Balise <code class='spip_code' dir='ltr'><area></code> HTML5 – Zone cliquable ou lien dans une image</h3><div style='text-align: left;' class='spip_code' dir='ltr'><code><br />
<map name="logo"><br /> <area shape="rect" coords="0,0,70,70" href="http://41mag.fr" alt="Accueil" /><br /> <area shape="rect" coords="80,0,145,70" href="http://google.fr" alt="Google" target="_BLANK" /><br /> <area shape="rect" coords="0,80,70,145" href="#" alt="bleu" /><br /> <area shape="rect" coords="80,80,145,145" href="#" alt="orange" /><br />
</map></code></div>
<p><strong>Les balises d'image :</strong><br class='autobr' />
<code class='spip_code' dir='ltr'><area></code> : Définit une zone réactive<br class='autobr' />
<code class='spip_code' dir='ltr'></code> : Définit une image<br class='autobr' />
<code class='spip_code' dir='ltr'><map></code> : Définit une relation « Carte d'Image »/Image</p>
<ul class="spip"><li> <strong>Balise <code class='spip_code' dir='ltr'><area></code> HTML5 – Zone cliquable ou lien dans une image</strong><br class='autobr' />
<a href="http://41mag.fr/liste-des-balises-html5/balise-area-html5" class='spip_url spip_out auto' rel='nofollow external'>http://41mag.fr/liste-des-balises-html5/balise-area-html5</a></li></ul><hr class="spip" /><h3 class="spip" id="outil_sommaire_9"><a title="Sommaire" href='http://icietla-ge.ch/voir/spip.php?id_rubrique=56&page=backend#outil_sommaire' class="sommaire_ancre"> </a>Exemple 3. Balise MAP : Image map</h3><div style='text-align: left;' class='spip_code' dir='ltr'><code><map name="ImgRefMap"><br /> <area shape="rect" href="http://www.startyourdev.com" title="Accueil StartYourDev" target="_blank" coords="25,25,75,75" /><br /> <area shape="poly" href="http://www.google.fr" title="Google" target="_blank" coords="1,1,100,1,100,100,75,75,75,25,25,25" /><br /> <area shape="poly" href="#" title="Page actuelle" target="_blank" coords="1,1,1,100,100,100,75,75,25,75,25,25" /><br />
</map><br />
</code></div><ul class="spip"><li> <strong>Balise MAP : Image map</strong><br class='autobr' />
<a href="http://www.startyourdev.com/html/tag-html-balise-map" class='spip_url spip_out auto' rel='nofollow external'>http://www.startyourdev.com/html/tag-html-balise-map</a></li></ul><hr class="spip" /><h3 class="spip" id="outil_sommaire_10"><a title="Sommaire" href='http://icietla-ge.ch/voir/spip.php?id_rubrique=56&page=backend#outil_sommaire' class="sommaire_ancre"> </a>Exemple 4. Les images map ou images cliquables</h3><div style='text-align: left;' class='spip_code' dir='ltr'><code><br />
<map name="panneaux" id="panneaux"><br /> <area shape="rect" coords="92,19,261,66" href="page-contact.html" alt="Contact" /><br /> <area shape="circle" coords="314,105,44" href="page-faq.html" alt="FAQ" /><br /> <area shape="poly" coords="18,100,42,83,190,103,183,148,36,132" href="page-home.html" alt="Accueil" /><br />
</map></code></div><ul class="spip"><li> <strong>Les images map ou images cliquables</strong><br class='autobr' />
<a href="http://formation.upyupy.fr/html-xhtml/images-map/" class='spip_url spip_out auto' rel='nofollow external'>http://formation.upyupy.fr/html-xhtml/images-map/</a></li></ul><hr class="spip" /><h3 class="spip" id="outil_sommaire_11"><a title="Sommaire" href='http://icietla-ge.ch/voir/spip.php?id_rubrique=56&page=backend#outil_sommaire' class="sommaire_ancre"> </a>Exemple 5. usemap (HTML attribute</h3><div style='text-align: left;' class='spip_code' dir='ltr'><code><map name="bigthings" id="bigthings"><br /> <area shape="rect" coords="35,4,205,108" href="http://en.wikipedia.org/wiki/Australia's_Big_Things" alt="Australia's Big Things (on Wikipedia)"/><br /> <area shape="rect" coords="136,163,255,230" href="http://vwkombi.com/" alt="The VW Kombi, another Aussie icon"/><br />
</map><br />
<p></p></code></div><ul class="spip"><li> <strong>usemap (HTML attribute)</strong><br class='autobr' />
<a href="http://reference.sitepoint.com/html/img/usemap" class='spip_url spip_out auto' rel='nofollow external'>http://reference.sitepoint.com/html/img/usemap</a></li></ul><hr class="spip" /><h3 class="spip" id="outil_sommaire_12"><a title="Sommaire" href='http://icietla-ge.ch/voir/spip.php?id_rubrique=56&page=backend#outil_sommaire' class="sommaire_ancre"> </a>Exemple 6. Images mappées et liens hypergraphiques</h3><div style='text-align: left;' class='spip_code' dir='ltr'><code><p><br /> <map name="ma_map" id="id_map"><br /> <!--informations de votre map--><br /> <area shape="rect" coords="10,10,20,30" href="a.html" alt="vers a"/><br /> <area shape="circle" coords="40,20,10" href="b.html" alt="vers b"/><br /> <area shape="poly" coords="10,30,30,30,20,50" href="c.html" alt="vers c"/><br /> <!-- ainsi de suite … --><br /> </map><br />
</p><br />
<p><br /> <br />
</p></code></div>
<p>la balise <code class='spip_code' dir='ltr'><map></map></code> permet de créer une map, et elle prend deux arguments obligatoires :</p>
<ul class="spip"><li> name : c'est le nom de votre map (il doit être unique).</li><li> id : c'est l'id de votre map (unique aussi). À vrai dire, il n'a pas vraiment d'utilité, mais il est obligatoire pour respecter les normes W3C.</li></ul>
<p>Notons également que cette balise <code class='spip_code' dir='ltr'><map></map></code> est une balise inline : elle doit donc se situer au sein d'une balise block, telle que <code class='spip_code' dir='ltr'><p></p></code>.</p>
<ul class="spip"><li> <strong>Images mappées et liens hypergraphiques</strong><br class='autobr' />
<a href="https://openclassrooms.com/courses/images-mappees-et-liens-hypergraphiques" class='spip_url spip_out auto' rel='nofollow external'>https://openclassrooms.com/courses/images-mappees-et-liens-hypergraphiques</a></li></ul><hr class="spip" /><h3 class="spip" id="outil_sommaire_13"><a title="Sommaire" href='http://icietla-ge.ch/voir/spip.php?id_rubrique=56&page=backend#outil_sommaire' class="sommaire_ancre"> </a>Exemple 7. Les balises <code class='spip_code' dir='ltr'><map></code> et <code class='spip_code' dir='ltr'><area /></code></h3><div style='text-align: left;' class='spip_code' dir='ltr'><code><br />
<map name="logo_w3c" id="maMap"><br /> <area shape="rect" coords="0,0,31,31" href="http://www.w3c.org" alt="la partie gauche du logo du w3c" /><br />
</map></code></div>
<p>Remarque : en principe les attributs name et id de la balise <code class='spip_code' dir='ltr'><map></code> doivent avoir la même valeur, soit : <code class='spip_code' dir='ltr'><map name="logo_w3c" id="logo_w3c"></code></p>
<p><strong>Utilisation des balises <code class='spip_code' dir='ltr'><map></map></code> et <code class='spip_code' dir='ltr'><area /></code></strong></p>
<ul class="spip"><li> La balise <code class='spip_code' dir='ltr'><map></map></code> est une « Carte d'Image » de la page web xhtml (balise de type BLOC).</li><li> La balise <code class='spip_code' dir='ltr'><area /></code> est une zone réactive de la page web xhtml (balise de type EN LIGNE).</li></ul>
<p>La balise <code class='spip_code' dir='ltr'><map></code> regroupe les différentes zones réactives d'une même image. Elle regroupe donc les balises <code class='spip_code' dir='ltr'><area /></code>. La balise</p>
<map> possède obligatoirement un identifiant (attribut id). L'attibut name permet de faire réference à l'image sur laquelle on veut intégrer une ou plusieurs zones réactives. A noter que la valeur de l'attribut id doit être identique à celle de l'attribut name.<ul class="spip"><li> <strong>La balise <code class='spip_code' dir='ltr'><map></code></strong><br class='autobr' />
<a href="http://xhtml.le-developpeur-web.com/map-xhtml.php" class='spip_url spip_out auto' rel='nofollow external'>http://xhtml.le-developpeur-web.com/map-xhtml.php</a></li><li> <strong>La balise <code class='spip_code' dir='ltr'><area /></code></strong><br class='autobr' />
<a href="http://xhtml.le-developpeur-web.com/area-xhtml.php" class='spip_url spip_out auto' rel='nofollow external'>http://xhtml.le-developpeur-web.com/area-xhtml.php</a></li></ul><hr class="spip" /><h3 class="spip" id="outil_sommaire_14"><a title="Sommaire" href='http://icietla-ge.ch/voir/spip.php?id_rubrique=56&page=backend#outil_sommaire' class="sommaire_ancre"> </a>Références</h3><ul class="spip"><li> <strong>13 Les objets, les images et les applets</strong><br class='autobr' />
<a href="http://www.la-grange.net/w3c/html4.01/struct/objects.html" class='spip_url spip_out auto' rel='nofollow external'>http://www.la-grange.net/w3c/html4.01/struct/objects.html</a>
<ul class="spip"><li> <strong>13.6 Les images cliquables</strong><br class='autobr' />
<a href="http://www.la-grange.net/w3c/html4.01/struct/objects.html#h-13.6" class='spip_url spip_out auto' rel='nofollow external'>http://www.la-grange.net/w3c/html4.01/struct/objects.html#h-13.6</a></li></ul></li></ul><ul class="spip"><li> <strong>HTML 4.01 Specification - W3C Recommendation 24 December 1999</strong><br class='autobr' />
<a href="https://www.w3.org/TR/html401/" class='spip_url spip_out auto' rel='nofollow external'>https://www.w3.org/TR/html401/</a>
<ul class="spip"><li> <strong>6. Image maps</strong><br class='autobr' />
<a href="https://www.w3.org/TR/html401/struct/objects.html#h-13.6" class='spip_url spip_out auto' rel='nofollow external'>https://www.w3.org/TR/html401/struct/objects.html#h-13.6</a>
<ul class="spip"><li> <strong>6.1. Client-side image maps : the MAP and AREA elements</strong><br class='autobr' />
<a href="https://www.w3.org/TR/html401/struct/objects.html#h-13.6.1" class='spip_url spip_out auto' rel='nofollow external'>https://www.w3.org/TR/html401/struct/objects.html#h-13.6.1</a>
<ul class="spip"><li> <strong>6.1.1. Client-side image map examples</strong><br class='autobr' />
<a href="https://www.w3.org/TR/html401/struct/objects.html#h-13.6.1.1" class='spip_url spip_out auto' rel='nofollow external'>https://www.w3.org/TR/html401/struct/objects.html#h-13.6.1.1</a></li></ul></li><li> <strong>6.2. Server-side image maps</strong><br class='autobr' />
<a href="https://www.w3.org/TR/html401/struct/objects.html#h-13.6.2" class='spip_url spip_out auto' rel='nofollow external'>https://www.w3.org/TR/html401/struct/objects.html#h-13.6.2</a></li></ul></li></ul></li></ul><ul class="spip"><li> <strong>HTML5 : A vocabulary and associated APIs for HTML and XHTML</strong><br class='autobr' />
<a href="https://dev.w3.org/html5/spec-preview/Overview.html" class='spip_url spip_out auto' rel='nofollow external'>https://dev.w3.org/html5/spec-preview/Overview.html</a><br class='autobr' />
Editor's Draft 22 August 2012
<ul class="spip"><li> <strong>4.8.12 The map element</strong><br class='autobr' />
<a href="https://dev.w3.org/html5/spec-preview/Overview.html#the-map-element" class='spip_url spip_out auto' rel='nofollow external'>https://dev.w3.org/html5/spec-preview/Overview.html#the-map-element</a></li><li> <strong>4.8.13 The area element</strong><br class='autobr' />
<a href="https://dev.w3.org/html5/spec-preview/Overview.html#the-area-element" class='spip_url spip_out auto' rel='nofollow external'>https://dev.w3.org/html5/spec-preview/Overview.html#the-area-element</a></li><li> <strong>4.8.14 Image maps</strong><br class='autobr' />
<a href="https://dev.w3.org/html5/spec-preview/Overview.html#image-maps" class='spip_url spip_out auto' rel='nofollow external'>https://dev.w3.org/html5/spec-preview/Overview.html#image-maps</a></li></ul></li></ul><ul class="spip"><li> <strong>Utilisation des balises <code class='spip_code' dir='ltr'><map></map></code> et <code class='spip_code' dir='ltr'><area /></code></strong><br class='autobr' />
<a href="http://www.quackit.com/html/tags/html_map_tag.cfm" class='spip_url spip_out auto' rel='nofollow external'>http://www.quackit.com/html/tags/html_map_tag.cfm</a></li><li> <strong>HTML <code class='spip_code' dir='ltr'><area></code> Tag</strong><br class='autobr' />
<a href="http://www.quackit.com/html/tags/html_area_tag.cfm" class='spip_url spip_out auto' rel='nofollow external'>http://www.quackit.com/html/tags/html_area_tag.cfm</a></li></ul><ul class="spip"><li> <strong>Image Maps</strong><br class='autobr' />
<a href="http://www.mrinitialman.com/Library/HTML/Chapters/HTML/HTML-Image_Maps.html" class='spip_url spip_out auto' rel='nofollow external'>http://www.mrinitialman.com/Library/HTML/Chapters/HTML/HTML-Image_Maps.html</a></li></ul><ul class="spip"><li> <strong>area – image-map hyperlink # T</strong><br class='autobr' />
<a href="http://w3c.github.io/html-reference/area.html" class='spip_url spip_out auto' rel='nofollow external'>http://w3c.github.io/html-reference/area.html</a></li></ul><ul class="spip"><li> <strong>map – image-map definition # T</strong><br class='autobr' />
<a href="http://w3c.github.io/html-reference/map.html#map" class='spip_url spip_out auto' rel='nofollow external'>http://w3c.github.io/html-reference/map.html#map</a></li></ul><ul class="spip"><li> <strong>img – image # T</strong><br class='autobr' />
<a href="http://w3c.github.io/html-reference/img.html#img" class='spip_url spip_out auto' rel='nofollow external'>http://w3c.github.io/html-reference/img.html#img</a></li></ul><ul class="spip"><li> <strong>HTML/Elements/map</strong><br class='autobr' />
<a href="https://www.w3.org/wiki/HTML/Elements/map" class='spip_url spip_out auto' rel='nofollow external'>https://www.w3.org/wiki/HTML/Elements/map</a></li></ul><ul class="spip"><li> <strong>HTML/Elements/area</strong><br class='autobr' />
<a href="https://www.w3.org/wiki/HTML/Elements/area" class='spip_url spip_out auto' rel='nofollow external'>https://www.w3.org/wiki/HTML/Elements/area</a></li></ul><ul class="spip"><li> <strong>HTML/Elements/img</strong><br class='autobr' />
<a href="https://www.w3.org/wiki/HTML/Elements/img" class='spip_url spip_out auto' rel='nofollow external'>https://www.w3.org/wiki/HTML/Elements/img</a></li></ul><ul class="spip"><li> <strong>Image map</strong><br class='autobr' />
<a href="https://en.wikipedia.org/wiki/Image_map" class='spip_url spip_out auto' rel='nofollow external'>https://en.wikipedia.org/wiki/Image_map</a></li></ul><ul class="spip"><li> <strong>Les cartes d'images</strong><br class='autobr' />
<a href="http://www.redfoxcenter.org/HTML/imagemap.html" class='spip_url spip_out auto' rel='nofollow external'>http://www.redfoxcenter.org/HTML/imagemap.html</a></li></ul><ul class="spip"><li> <strong>Les Images réactives</strong><br class='autobr' />
<a href="http://stephane.chalamet.free.fr/html/images.html" class='spip_url spip_out auto' rel='nofollow external'>http://stephane.chalamet.free.fr/html/images.html</a></li></ul><ul class="spip"><li> <strong>HTML - Exploiter une « image-map »</strong><br class='autobr' />
<a href="http://www.thelin.net/laurent/labo/html/imagemap.html" class='spip_url spip_out auto' rel='nofollow external'>http://www.thelin.net/laurent/labo/html/imagemap.html</a></li></ul><ul class="spip"><li> <strong>INTRODUCTION TO IMAGE MAPS</strong><br class='autobr' />
<a href="http://www.htmltutorials.ca/lesson20.htm" class='spip_url spip_out auto' rel='nofollow external'>http://www.htmltutorials.ca/lesson20.htm</a></li></ul><ul class="spip"><li> <strong>How to Make an Image Map</strong><br class='autobr' />
<a href="http://www.faqs.org/docs/htmltut/images/images_famsupp_220.html" class='spip_url spip_out auto' rel='nofollow external'>http://www.faqs.org/docs/htmltut/images/images_famsupp_220.html</a></li></ul><ul class="spip"><li> <strong><a href="http://www.idocs.com" class='spip_url spip_out auto' rel='nofollow external'>www.idocs.com</a> : <code class='spip_code' dir='ltr'></code>, <code class='spip_code' dir='ltr'><map></code>, <code class='spip_code' dir='ltr'><area></code></strong>
<ul class="spip"><li> <code class='spip_code' dir='ltr'></code> : <a href="http://www.idocs.com/tags/images/_IMG.html" class='spip_url spip_out auto' rel='nofollow external'>http://www.idocs.com/tags/images/_IMG.html</a></li><li> <code class='spip_code' dir='ltr'><map></code> : <a href="http://www.idocs.com/tags/images/_MAP.html" class='spip_url spip_out auto' rel='nofollow external'>http://www.idocs.com/tags/images/_MAP.html</a></li><li> <code class='spip_code' dir='ltr'><area></code> : <a href="http://www.idocs.com/tags/images/_AREA.html" class='spip_url spip_out auto' rel='nofollow external'>http://www.idocs.com/tags/images/_AREA.html</a></li></ul></li></ul><ul class="spip"><li> <strong>developer.mozilla.org : : <code class='spip_code' dir='ltr'></code>, <code class='spip_code' dir='ltr'><map></code>, <code class='spip_code' dir='ltr'><area></code></strong>
<ul class="spip"><li> <code class='spip_code' dir='ltr'></code> : <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/Img" class='spip_url spip_out auto' rel='nofollow external'>https://developer.mozilla.org/fr/docs/Web/HTML/Element/Img</a></li><li> <code class='spip_code' dir='ltr'><map></code> : <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/map" class='spip_url spip_out auto' rel='nofollow external'>https://developer.mozilla.org/fr/docs/Web/HTML/Element/map</a></li><li> <code class='spip_code' dir='ltr'><area></code> : <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/area" class='spip_url spip_out auto' rel='nofollow external'>https://developer.mozilla.org/fr/docs/Web/HTML/Element/area</a></li></ul></li></ul><ul class="spip"><li> <strong>How to Make an Image Map</strong><br class='autobr' />
<a href="http://html.com/images/how-to-make-an-image-map/" class='spip_url spip_out auto' rel='nofollow external'>http://html.com/images/how-to-make-an-image-map/</a>
<ul class="spip"><li> Images : <a href="http://html.com/images/" class='spip_url spip_out auto' rel='nofollow external'>http://html.com/images/</a></li><li> <code class='spip_code' dir='ltr'><area shape=""></code> : <a href="http://html.com/attributes/area-shape/" class='spip_url spip_out auto' rel='nofollow external'>http://html.com/attributes/area-shape/</a></li></ul></li></ul><ul class="spip"><li> <strong>Image maps</strong><br class='autobr' />
<a href="http://www.howtocreate.co.uk/tutorials/html/imagemaps" class='spip_url spip_out auto' rel='nofollow external'>http://www.howtocreate.co.uk/tutorials/html/imagemaps</a></li></ul><ul class="spip"><li> <strong>Image Maps</strong><br class='autobr' />
<a href="http://www.htmlite.com/lite028.php" class='spip_url spip_out auto' rel='nofollow external'>http://www.htmlite.com/lite028.php</a></li></ul><ul class="spip"><li> <strong>Creating Image Maps</strong><br class='autobr' />
<a href="http://www.elated.com/articles/creating-image-maps/" class='spip_url spip_out auto' rel='nofollow external'>http://www.elated.com/articles/creating-image-maps/</a></li></ul><ul class="spip"><li> <strong>The map element, The area element, Image maps, MathML, SVG, Dimension attributes</strong><br class='autobr' />
<a href="https://developers.whatwg.org/the-map-element.html#the-map-element" class='spip_url spip_out auto' rel='nofollow external'>https://developers.whatwg.org/the-map-element.html#the-map-element</a></li></ul><hr class="spip" /><h3 class="spip" id="outil_sommaire_15"><a title="Sommaire" href='http://icietla-ge.ch/voir/spip.php?id_rubrique=56&page=backend#outil_sommaire' class="sommaire_ancre"> </a>Sources des exemples, documentation</h3><ul class="spip"><li> <strong>Image Map : Liens dans une d'image</strong><br class='autobr' />
<a href="http://www.xul.fr/ecmascript/image-map.php" class='spip_url spip_out auto' rel='nofollow external'>http://www.xul.fr/ecmascript/image-map.php</a></li></ul><ul class="spip"><li> <strong>Balise <code class='spip_code' dir='ltr'><area></code> HTML5 – Zone cliquable ou lien dans une image</strong><br class='autobr' />
<a href="http://41mag.fr/liste-des-balises-html5/balise-area-html5" class='spip_url spip_out auto' rel='nofollow external'>http://41mag.fr/liste-des-balises-html5/balise-area-html5</a></li></ul><ul class="spip"><li> <strong>Balise MAP : Image map</strong><br class='autobr' />
<a href="http://www.startyourdev.com/html/tag-html-balise-map" class='spip_url spip_out auto' rel='nofollow external'>http://www.startyourdev.com/html/tag-html-balise-map</a></li></ul><ul class="spip"><li> <strong>Les images map ou images cliquables</strong><br class='autobr' />
<a href="http://formation.upyupy.fr/html-xhtml/images-map/" class='spip_url spip_out auto' rel='nofollow external'>http://formation.upyupy.fr/html-xhtml/images-map/</a></li></ul><ul class="spip"><li> <strong>usemap (HTML attribute)</strong><br class='autobr' />
<a href="http://reference.sitepoint.com/html/img/usemap" class='spip_url spip_out auto' rel='nofollow external'>http://reference.sitepoint.com/html/img/usemap</a></li></ul><ul class="spip"><li> <strong>Images mappées et liens hypergraphiques</strong><br class='autobr' />
<a href="https://openclassrooms.com/courses/images-mappees-et-liens-hypergraphiques" class='spip_url spip_out auto' rel='nofollow external'>https://openclassrooms.com/courses/images-mappees-et-liens-hypergraphiques</a></li></ul><ul class="spip"><li> <strong>La balise <code class='spip_code' dir='ltr'><map></code></strong><br class='autobr' />
<a href="http://xhtml.le-developpeur-web.com/map-xhtml.php" class='spip_url spip_out auto' rel='nofollow external'>http://xhtml.le-developpeur-web.com/map-xhtml.php</a></li><li> <strong>La balise <code class='spip_code' dir='ltr'><area /></code></strong><br class='autobr' />
<a href="http://xhtml.le-developpeur-web.com/area-xhtml.php" class='spip_url spip_out auto' rel='nofollow external'>http://xhtml.le-developpeur-web.com/area-xhtml.php</a></li></ul><hr class="spip" /><h3 class="spip" id="outil_sommaire_16"><a title="Sommaire" href='http://icietla-ge.ch/voir/spip.php?id_rubrique=56&page=backend#outil_sommaire' class="sommaire_ancre"> </a>Outils pour créere des <code class='spip_code' dir='ltr'><area/></code></h3><ul class="spip"><li> <strong>14.2. Carte cliquable (avec Gimp)</strong><br class='autobr' />
<a href="https://docs.gimp.org/fr/plug-in-imagemap.html" class='spip_url spip_out auto' rel='nofollow external'>https://docs.gimp.org/fr/plug-in-imagemap.html</a></li></ul><ul class="spip"><li> <strong>Images mapées Avec Mapthis</strong><br class='autobr' />
<a href="http://www.lehtml.com/htmlplus/mapthis.htm" class='spip_url spip_out auto' rel='nofollow external'>http://www.lehtml.com/htmlplus/mapthis.htm</a></li></ul></div>
</article>
<article>
<h1>« Image Map » JQuery MapHilight (zones illuminées au survol de la souris) de David Lynch appliqué à l'image « Louve Capitoline » dans SPIP</h1>
<p>François Daniel Giezendanner — 2017-01-11T23:07:13Z</p>

		<div class='rss_texte'><div class="cs_sommaire cs_sommaire_avec_fond" id="outil_sommaire"> <div class="cs_sommaire_inner"> <div class="cs_sommaire_titre_avec_fond"> Sommaire </div> <div class="cs_sommaire_corps"> <ul> <li><a title="Préambule" href='http://icietla-ge.ch/voir/spip.php?id_rubrique=56&page=backend#outil_sommaire_0'>Préambule</a></li>
<li><a title="Introduction" href='http://icietla-ge.ch/voir/spip.php?id_rubrique=56&page=backend#outil_sommaire_1'>Introduction</a></li>
<li><a title="Fonctionnalités" href='http://icietla-ge.ch/voir/spip.php?id_rubrique=56&page=backend#outil_sommaire_2'>Fonctionnalités</a></li>
<li><a title="Application de l'exemple maphilight « simple demo » à l'image « Louve Capitoline (...)" href='http://icietla-ge.ch/voir/spip.php?id_rubrique=56&page=backend#outil_sommaire_3'>Application de l'exemple (...)</a></li>
<li><a title="Précisions concernant les attributs utilisés dans les Balises <area />" href='http://icietla-ge.ch/voir/spip.php?id_rubrique=56&page=backend#outil_sommaire_4'>Précisions concernant les (...)</a></li>
<li><a title="Réglage des paramètres de maphilight" href='http://icietla-ge.ch/voir/spip.php?id_rubrique=56&page=backend#outil_sommaire_5'>Réglage des paramètres de (...)</a></li>
<li><a title="Code complet utilisé pour l'image de « La Louve Capitoline » :" href='http://icietla-ge.ch/voir/spip.php?id_rubrique=56&page=backend#outil_sommaire_6'>Code complet utilisé pour (...)</a></li>
<li><a title="Documentation, téléchargements et exemples" href='http://icietla-ge.ch/voir/spip.php?id_rubrique=56&page=backend#outil_sommaire_7'>Documentation, téléchargements</a></li> </ul> </div> </div>
</div><h3 class="spip" id="outil_sommaire_0"><a title="Sommaire" href='http://icietla-ge.ch/voir/spip.php?id_rubrique=56&page=backend#outil_sommaire' class="sommaire_ancre"> </a>Préambule</h3>
<p>En standard dans le squelette de SPIP 3.1 la largeur maximale des images est fixée à 672 pixel, en particulier dans le fichier article.html, lorsque cette largeur est plus grande elle est réduite à 672 pixels avec l'utilisation du filtre <code class='spip_code' dir='ltr'>|image_reduire</code>. Pour plus d'informations on consultera l'article <a href='http://icietla-ge.ch/voir/spip.php?article224' class='spip_in'>Réduire la dimension des images avec le filtre <code class='spip_code' dir='ltr'>|image_reduire<i>largeur,hauteur</i></code></a>.</p>
<p>L'exemple maphilight « simple demo » appliqué ici à l'image « Louve Capitoline » est totalement opérationnel sur grand écran avec une souris. Ce n'est pas le cas avec l'utilisation des tablettes (Ipad, etc.) et smartphones (Iphone, etc.).</p>
<hr class="spip" /><h3 class="spip" id="outil_sommaire_1"><a title="Sommaire" href='http://icietla-ge.ch/voir/spip.php?id_rubrique=56&page=backend#outil_sommaire' class="sommaire_ancre"> </a>Introduction</h3>
<p>JQuery maphilight (Map Hilight) est le script jquery créé par David Lynch. Ce script permet aux rédacteurs d'associer des zones de clic aux images. De plus, fait important, ce script permet de changer les couleurs, transparences, épaisseurs de traits et d'ajouter une ombre paramétrée pour les zones cliquables au survol de la souris, tout cela sans nécessiter la connaissance de javascript / jquery.</p>
<p>Dans cet article nous appliquons le code de l'exemple maphilight « simple demo » à l'image « Louve Capitoline ».</p>
<hr class="spip" /><h3 class="spip" id="outil_sommaire_2"><a title="Sommaire" href='http://icietla-ge.ch/voir/spip.php?id_rubrique=56&page=backend#outil_sommaire' class="sommaire_ancre"> </a>Fonctionnalités</h3><ul class="spip"><li> Fournit des graphiques interactifs simples via des cartes d'image HTML (pas besoin de flash).</li><li> Facile à utiliser : choisissez le paramètre par défaut 'mettre en évidence toutes les images' ou ajoutez simplement <code class='spip_code' dir='ltr'>class = "jq_maphilight"</code> à la balise <code class='spip_code' dir='ltr'></code> d'une carte d'image spécifique que vous souhaitez mettre en surbrillance.</li><li> Entièrement configurable : options pour le remplissage, la couleur de remplissage, l'opacité de remplissage, le contour, la couleur du contour, l'opacité du contour, l'épaisseur du contour, un effet de fondu et l'ajout d'une ombre paramétrée.</li></ul><hr class="spip" /><h3 class="spip" id="outil_sommaire_3"><a title="Sommaire" href='http://icietla-ge.ch/voir/spip.php?id_rubrique=56&page=backend#outil_sommaire' class="sommaire_ancre"> </a>Application de l'exemple maphilight « simple demo » à l'image « Louve Capitoline »</h3>
<head> <meta charset="utf-8"> <title>jQuery maphilight documentation   










 L'attribution des couleurs de trait et de fond, épaisseur de trait et opacité des zones réactives sont attribuées à chaque zone dans sa balise  avec une instruction du type :

data-maphilight='{"strokeColor":"ff00ff","strokeWidth":2,"fillColor":"ff0000","fillOpacity":0.2}'
La documentation du plugin maphilight et présentée dans l'article « jQuery maphilight documentation », lequel propose quatre exemples d'utilisation du plugin. Ici nous appliquons le code de l'exemple « The simple demo (with awful art, and examples of data attributes) » à l'image « Louve Capitoline ».
 Précisions concernant les attributs utilisés dans les Balises 
Nous avons choisis de définir cinq zones réactives :

1) La tête de la louve

2) Les mamelles de la louve

3) L'enfant Rémus

4) L'enfant Romulus

5) L'ensemble de l'image sauf les zones 1) à 4) définies ci-dessus.
Les 7 attributs utilisés ici pour définir les zones réactives 1 à 4 des balises  sont les suivants :

 shape="poly" : Déclare que la zone réactive a une forme polygonale.
 alt="Link" : Affiche le texte alternatif « Link » lorsque l'image ne s'affiche pas.
 coords="221,133,243,129,289,125,341,124,..." : Liste des coordonnées x,y des points définissant le polygone séparées par des virgules.
 href="https://www.icem-pedagogie-freinet.org/node/3593" : Adresse de destination (URL) pour une page externe au site. Pour une page interne au site SPIP on écrira par exemple href="spip.php?article141#outil_sommaire_1", on atteint ainsi l'article 141 positionné à l'ancre « #outil_sommaire_1 ».
 target="_blank" : Ouvre le lien (page cible) dans une nouvelle fenêtre sans nom.
 data-maphilight='{"strokeColor":"00ff00","strokeWidth":2,"fillColor":"0000ff","fillOpacity":0.2}' : Attribution des couleurs de trait et de fond, épaisseur de trait, opacité, etc. des zones réactives.
 title="Bla, bla, bla ..." : Texte de l'infobulle lors du survol de l'image par le curseur.

/>
Les attributs sont définis de la même manière pour la zone réactive 5) sauf pour les attributs shape et coords qui sont définis comme suit :
shape="rect" : Déclare que la zone réactive a une forme rectangulaire.

coords="1,1,499,299" : cordonnées x1,y1,x2,y2 des coins haut-gauche et bas-droite du rectangle. Cette zone réactive rectangulaire couvre l'ensemble de l'image sauf les zones 1) à 4) définies ci-dessus.
Remarque :

Pour couvrir l'ensemble de l'image, il est également possible, en lieu et place de shape="rect", de définir l'attribut shape comme suit :
shape="default" : là aussi la zone ainsi définie couvre l'ensemble de l'image sauf les zones 1) à 4) définies ci-dessus. L'attribut coords n'a pas a être définit.
L'inconvénient de cette démarche c'est que l'attribut shape="default" n'est pas pris en compte par le plugin maphilight, ainsi lorsque cette zone est survolée par la souris elle ne présente alors aucun changement de couleur du trait et du fond, épaisseur du trait et opacité du fond, seul le curseur change de forme au survol de la zone.
 Réglage des paramètres de maphilight
(Pour plus de détails on consultera : jQuery maphilight documentation)
Paramètres utilisés dans l'exemple
Dans l'exemple ci-dessus, pour chaque zone réactive nous avons utilisé une instruction du type :

data-maphilight='{"strokeColor":"00ff00","strokeWidth":2,"fillColor":"0000ff","fillOpacity":0.2}'
Soit les 4 paramètres suivants de maphilight : strokeColor, strokeWidth, fillColor et fillOpacity.
En fait vous disposez des 20 paramètres décrits ci-dessous :
$.maphilight.defaults
Les valeurs par défaut pour toutes les utilisations de maphilight peuvent être définies ici. Si vous le remplacez manuellement, vous devez spécifier toutes les options.
$.fn.maphilight.defaults = {
 fill: true,
 fillColor: '000000',
 fillOpacity: 0.2,
 stroke: true,
 strokeColor: 'ff0000',
 strokeOpacity: 1,
 strokeWidth: 1,
 fade: true,
 alwaysOn: false,
 neverOn: false,
 groupBy: false,
 wrapClass: true,
 shadow: false,
 shadowX: 0,
 shadowY: 0,
 shadowRadius: 6,
 shadowColor: '000000',
 shadowOpacity: 0.8,
 shadowPosition: 'outside',
 shadowFrom: false

}
Description générale des options

No Paramètres Type – Val Défaut Explications


1
fill
(Boolean. Par défaut : true)
Pour remplir la forme

2
fillColor
(String. Par défaut : '000000')
La couleur pour remplir la forme avec

3
fillOpacity
(Number. Default : 0.2)
L'opacité du remplissage (0 = entièrement transparent, 1 = entièrement opaque)

4
stroke
(Boolean. Par défaut : true)
Décrire ou non la forme

5
strokeColor
(Valeur par défaut : 'ff0000')
La couleur du contour

6
strokeOpacity
(Nombre par défaut : 1)
L'opacité du contour (0 = entièrement transparent, 1 = entièrement opaque)

7
strokeWidth
(Nombre par défaut : 1)
L'épaisseur du contour

8
fade
(Booléen. Par défaut : true)
Que ce soit pour se faner dans les formes sur mouseover

9
alwaysOn
(Boolean. Par défaut : false)
Indiquer ou non les zones héliogravées

10
neverOn
(Boolean. Par défaut : false)
Qu'il ne faut jamais montrer les zones hilight (Cela n'a de sens que d'utiliser comme métadonnées par zone, bien sûr.)

11
groupBy
(Valeur par défaut : false)
Le nom d'un attribut pour les zones de groupe. Si cela est présent, toutes les zones de la carte qui ont la même valeur d'attribut que la zone en vol stationnaire

12
wrapClass
(String / bool. Par défaut : false)
Si true, applique la classe sur le  à l'enveloppe div maphilight créée. Si une chaîne, cette chaîne est utilisée comme une classe sur le wrapper div.

13
shadow
(Boolean. Par défaut : false)
Appliquer une ombre à la forme. (Fonctionne uniquement avec les navigateurs supportant la toile. So, everything but IE below version 9.)

14
shadowPosition
(String. Par défaut : 'outside')
Où placer l'ombre. Peut être « outside », « inside » ou « both ».

15
shadowFrom
(String / bool. Par défaut : false)
Ce qu'il faut utiliser pour jeter l'ombre. Peut être 'stroke' ou 'fill'. Si false, choisissez une valeur basée sur la position d'ombre. (En général, il semble mieux s'il est coulé à partir d'un remplissage quand il est en dehors de la forme, et d'un coup quand il est à l'intérieur de la forme.)

16
shadowX
(Nombre par défaut : 0)
Décalage horizontal de l'ombre par rapport à la forme.

17
shadowY
(Nombre par défaut : 0)
Décalage vertical de l'ombre par rapport à la forme.

18
shadowRadius
(Nombre par défaut : 6)
Taille de l'ombre.

19
shadowColor
(Valeur par défaut : '000000')
Couleur de l'ombre.

20
shadowOpacity
(Nombre par défaut : 0.8)
Opacité de l'ombre.

 Code complet utilisé pour l'image de « La Louve Capitoline » :



 
 jQuery maphilight documentation
 
 
 























 Documentation, téléchargements et exemples
 jQuery maphilight documentation

http://davidlynch.org/projects/maphilight/docs/
 The simple demo (with awful art, and examples of data attributes)

http://davidlynch.org/projects/maphilight/docs/demo_simple.html
 A map of the world

http://davidlynch.org/projects/maphilight/docs/demo_world.html
 A map of the USA

http://davidlynch.org/projects/maphilight/docs/demo_usa.html#
 A few feature-demonstrations

http://davidlynch.org/projects/maphilight/docs/demo_features.html
 maphilight : image map mouseover highlighting

David Lynch has a blog, Posted on March 5, 2008 by kemayo

UPDATE 2011-05-04 : Version 1.3 released. Works in IE9. (There's a pattern here.)

UPDATE 2010-05-22 : Version 1.2 released. Works in IE8.

http://davidlynch.org/blog/2008/03/maphilight-image-map-mouseover-highlighting/
 jQuery maphilight documentation

http://www.jqueryscript.net/demo/Simple-jQuery-Plugin-For-Highlighting-Image-Map-Maphilight/docs/
 jQuery plugin that adds highlighting to image maps

https://github.com/kemayo/maphilight
 Simple jQuery Plugin For Highlighting Image Map - Maphilight

http://www.jqueryscript.net/other/Simple-jQuery-Plugin-For-Highlighting-Image-Map-Maphilight.html
 Carte interactive en JQuery

http://www.memorandom.fr/jquery/carte-interactive-en-jquery/
 jquery maphighlight demo

http://www.testing-site.info/jquery-maphighlight-demo.html
 Développement durable, Cartes de l'eau

Gouvernement français, Ministère de l'Environnement, de l'Énergie et de la Mer

http://www.developpement-durable.gouv.fr/carte_eau/index.html
 jQuery Map Hilight

Posted by WorldFallz on March 25, 2008 at 8:07pm 

https://www.drupal.org/project/jq_maphilight
  Plugin Image cliquable : des zones qui se colorisent au survol
 Intégration de maphilight dans SPIP

Bruno CAILLARD, 2012

http://spip-zone.rezo.narkive.com/9znvNaBl/plugin-image-cliquable-des-zones-qui-se-colorisent-au-survol
 Javascript / jQueryPatrimonium Immobilier : exemple d'utilisation du plugin jQuery maphighlight

Lundi 06 Septembre 2010, lu 3579 fois

http://www.romualb.com/2010/09/06/205/patrimonium_immobilier_exemple_d_utilisation_du_plugin_jquery_maphighlight.html
 How can I use jQuery maphilight ?

http://wordpress.stackexchange.com/questions/211561/how-can-i-use-jquery-maphilight

No	Paramètres	Type – Val Défaut	Explications
1	`fill`	(Boolean. Par défaut : true)	Pour remplir la forme
2	`fillColor`	(String. Par défaut : '000000')	La couleur pour remplir la forme avec
3	`fillOpacity`	(Number. Default : 0.2)	L'opacité du remplissage (0 = entièrement transparent, 1 = entièrement opaque)
4	`stroke`	(Boolean. Par défaut : true)	Décrire ou non la forme
5	`strokeColor`	(Valeur par défaut : 'ff0000')	La couleur du contour
6	`strokeOpacity`	(Nombre par défaut : 1)	L'opacité du contour (0 = entièrement transparent, 1 = entièrement opaque)
7	`strokeWidth`	(Nombre par défaut : 1)	L'épaisseur du contour
8	`fade`	(Booléen. Par défaut : true)	Que ce soit pour se faner dans les formes sur mouseover
9	`alwaysOn`	(Boolean. Par défaut : false)	Indiquer ou non les zones héliogravées
10	`neverOn`	(Boolean. Par défaut : false)	Qu'il ne faut jamais montrer les zones hilight (Cela n'a de sens que d'utiliser comme métadonnées par zone, bien sûr.)
11	`groupBy`	(Valeur par défaut : false)	Le nom d'un attribut pour les zones de groupe. Si cela est présent, toutes les zones de la carte qui ont la même valeur d'attribut que la zone en vol stationnaire
12	`wrapClass`	(String / bool. Par défaut : false)	Si true, applique la classe sur le à l'enveloppe div maphilight créée. Si une chaîne, cette chaîne est utilisée comme une classe sur le wrapper div.
13	`shadow`	(Boolean. Par défaut : false)	Appliquer une ombre à la forme. (Fonctionne uniquement avec les navigateurs supportant la toile. So, everything but IE below version 9.)
14	`shadowPosition`	(String. Par défaut : 'outside')	Où placer l'ombre. Peut être « outside », « inside » ou « both ».
15	`shadowFrom`	(String / bool. Par défaut : false)	Ce qu'il faut utiliser pour jeter l'ombre. Peut être 'stroke' ou 'fill'. Si false, choisissez une valeur basée sur la position d'ombre. (En général, il semble mieux s'il est coulé à partir d'un remplissage quand il est en dehors de la forme, et d'un coup quand il est à l'intérieur de la forme.)
16	`shadowX`	(Nombre par défaut : 0)	Décalage horizontal de l'ombre par rapport à la forme.
17	`shadowY`	(Nombre par défaut : 0)	Décalage vertical de l'ombre par rapport à la forme.
18	`shadowRadius`	(Nombre par défaut : 6)	Taille de l'ombre.
19	`shadowColor`	(Valeur par défaut : '000000')	Couleur de l'ombre.
20	`shadowOpacity`	(Nombre par défaut : 0.8)	Opacité de l'ombre.