Tutorial for JMatchMap by Agnès Simonet October 2020

Image Map tutorial

(for JMatchMap)

Table of contents
Create an image-map with Gimp (for JMatchMap).............................................2
Open the image to map with Gimp......................................................................2
Open The Image Map Editor In Gimp..................................................................2
Start Mapping..................................................................................................3
Edit the image-map data...................................................................................4
Edit map info...................................................................................................5
Get the code...................................................................................................6
Clear the code.................................................................................................6
Links..............................................................................................................7
Create an image map online (for JMatchMap)....................................................8
I Mobilefish.com...............................................................................................8
II image-map.net...........................................................................................10
 Create an image-map with Gimp (for JMatchMap)
You can download Gimp here. After installation, load Gimp.
The example refers to the "continents.png" image in the "demos_JMM" folder.
Open the image to map with Gimp
In our example, the image to map is continents.png.
Open The Image Map Editor In Gimp
Use Filters → Web → Imagemap.

This should bring up the image map editor.

You will then be able to draw areas on the image with a choosen shape and Gimp
will calculate and save the coordinates (in relation to the image boundaries) of these
areas.
Start Mapping
Choose a shape
On the left select the rectangular or circular shape.
Don't use the polygon shape as JMatchMap will not be able to use it.
Note that using circular shapes is an easy way to point the exact center of
the area which is the only useful data for JMatchMap.
Draw a shape
This is quite intuitive: click on the image, move the pointer, and click again.
Don't worry about the dimensions of the area as JMatchMap will only take care of the
center of the area. Just avoid to create overlapping areas.
As you finish each area, a pop up appears for you to fill in.

Type "#" in the text box for "URL to activate" and type a description of the area in
the text box for "ALT text": it will be very useful when you build your JMatchMap
exercise.
Create the other areas in the same way.
Edit the image-map data
On the right of the working area is a property list of the created areas. A click on one
item of the list automatically selects the corresponding shape in the working area.

You can adjust the position of an area using (above the shapes on the left) or

open the settings window using and change the values of "Upper left x" and
"Upper left y".
Edit map info
Gimp (since version >2.8) transforms the name of your image ("continents.png") in
"[continents] (imported)".
To get the correct name in the code you must change this.

Mapping → Edit Map Info or :

Type "continents.png" for image name.

Get the code
After all of the designing is done, what you need in the end is the code.
Just go to View → Source and you will see the source code.

This is the text that is needed when building your JMatchMap exercise.

Save the file (File → Save or ) which will have a map extension (by default it will
be "[continents] (imported).map" that you can change in "continents.png.map").
Note that if you want to modify the created image map later, you will have to open
the image (continents.png), open the image map editor (Filters → Web → Imagemap)
and load the previously saved "continents.png.map" (File → Open, in the image map
editor).

Clear the code

You should delete some useless or obsolete parts of the text :
<img src="continents" width="536" height="258" border="0" usemap="#map" />

<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:AS -->
<area shape="rect" coords="458,188,487,211" alt="Océanie" href="#" />
<area shape="rect" coords="242,103,288,130" alt="Afrique" href="#" />
<area shape="rect" coords="279,42,298,57" alt="Europe" href="#" />
<area shape="rect" coords="55,42,87,70" alt="Amérique" href="#" />
<area shape="rect" coords="364,42,413,69" alt="Asie" href="#" />
</map>
 the cleared text will be :
<img src="continents" width="536" height="258" usemap="#map" />

<map name="map">
<area shape="rect" coords="458,188,487,211" alt="Océanie" href="#" />
<area shape="rect" coords="242,103,288,130" alt="Afrique" href="#" />
<area shape="rect" coords="279,42,298,57" alt="Europe" href="#" />
<area shape="rect" coords="55,42,87,70" alt="Amérique" href="#" />
<area shape="rect" coords="364,42,413,69" alt="Asie" href="#" />
</map>

As it is it will work but not satisfy the validator because you have to use an alt
attribute for an image tag in HTML5.
So modify the code as below:
<img src="continents.png" alt="continents" width="536" height="258"
usemap="#map" />
<map name="map">
<area shape="rect" coords="463,191,475,203" alt="Océanie" href="#" />
<area shape="rect" coords="276,141,288,153" alt="Afrique" href="#" />
<area shape="rect" coords="268,53,280,65" alt="Europe" href="#" />
<area shape="rect" coords="60,66,72,78" alt="Amerique" href="#" />
<area shape="rect" coords="390,53,402,65" alt="Asie" href="#" />
</map>

Links
Download Gimp
Gimp documentation
Gimp (current version) documentation for image map
 Create an image map online (for JMatchMap)
There is a lot of web sites where you can create an image map.
Choose one which offers to add a title or alt for the areas. This will help you to create
the exercise.
Most of the time you will have to modify the code that you get from these sites.
I Mobilefish.com
Here is an example obtained on mobilefish.com :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Image map</title>
<!--
How to install the image map:
Copy and paste the img, map and area blocks into the body of your page.

This imagemap is created at Mobilefish.com.

https://www.mobilefish.com/services/image_map/image_map.php
-->
</head>
<body>

<!-- START COPY -->

<img src="gd79569.png" usemap="#gd79569" width="536" height="258" alt="click map"
border="0" />
<map id="gd79569" name="gd79569">
<!-- Region 1 -->
<area shape="rect" alt="America" title="America" coords="54,39,89,62"
href="javascript:void(null);" target="_blank" />
<!-- Region 2 -->
<area shape="rect" alt="Africa" title="Africa" coords="236,102,284,126"
href="javascript:void(null);" target="_blank" />
<!-- Region 3 -->
<area shape="rect" alt="Europe" title="Europe" coords="284,38,309,52"
href="javascript:void(null);" target="_blank" />
<!-- Region 4 -->
<area shape="rect" alt="Asia" title="Asia" coords="361,46,412,73"
href="javascript:void(null);" target="_blank" />
<area shape="default" nohref alt="" />
</map>
<!-- END COPY -->
</body>
</html>
Lots of parts are useless or obsolete(border="0"). Delete them.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Image map</title>
<!--
How to install the image map:
Copy and paste the img, map and area blocks into the body of your page.

This imagemap is created at Mobilefish.com.

https://www.mobilefish.com/services/image_map/image_map.php
-->
</head>
<body>

<!-- START COPY -->

<img src="gd79569.png" usemap="#gd79569" width="536" height="258" alt="click map"
border="0" />
<map id="gd79569" name="gd79569">
<!-- Region 1 -->
<area shape="rect" alt="America" title="America" coords="54,39,89,62"
href="javascript:void(null);" target="_blank" />
<!-- Region 2 -->
<area shape="rect" alt="Africa" title="Africa" coords="236,102,284,126"
href="javascript:void(null);" target="_blank" />
<!-- Region 3 -->
<area shape="rect" alt="Europe" title="Europe" coords="284,38,309,52"
href="javascript:void(null);" target="_blank" />
<!-- Region 4 -->
<area shape="rect" alt="Asia" title="Asia" coords="361,46,412,73"
href="javascript:void(null);" target="_blank" />
<area shape="default" nohref alt="" />
</map>
<!-- END COPY -->
</body>
</html>

Parts to modify:
change it with the name of your image in your exercise folder (continents.png).
you can leave it as it is or use any name you want (e.g. "map", "areas")

So the code could be reduced to :

<img src="continents.png" usemap="#map" width="536" height="258" alt="click

map"/>
<map id="map" name="map">
<area shape="rect" alt="America" title="America" coords="54,39,89,62"
href="javascript:void(null);" target="_blank" />
<area shape="rect" alt="Africa" title="Africa" coords="236,102,284,126"
href="javascript:void(null);" target="_blank" />
<area shape="rect" alt="Europe" title="Europe" coords="284,38,309,52"
href="javascript:void(null);" target="_blank" />
<area shape="rect" alt="Asia" title="Asia" coords="361,46,412,73"
href="javascript:void(null);" target="_blank" />
</map>
II image-map.net
https://www.image-map.net/ is a very good site quite more easy to use than
mobilefish.com, especially with a circle shape, but unfortunately you will have to add
manually alt, width and height for the image.

You will get this code:

<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="continents.png" usemap="#image-map">

<map name="image-map">
<area target="_self" alt="America" title="America" href="#" coords="73,62,19" shape="circle">
<area target="_self" alt="Africa" title="Africa" href="#" coords="285,144,15" shape="circle">
<area target="_self" alt="Europe" title="Europe" href="#" coords="273,52,17" shape="circle">
<area target="_self" alt="Asia" title="Asia" href="#" coords="392,61,30" shape="circle">
</map>

So you have to add alt="continents" width="536" height="258" to the image tag:

!-- Image Map Generated by http://www.image-map.net/ -->
<img src="continents.png" alt="continents" width="536" height="258" usemap="#image-map">

<map name="image-map">
<area target="_self" alt="America" title="America" href="#" coords="73,62,19"
shape="circle">
<area target="_self" alt="Africa" title="Africa" href="#" coords="285,144,15"
shape="circle">
<area target="_self" alt="Europe" title="Europe" href="#" coords="273,52,17" shape="circle">
<area target="_self" alt="Asia" title="Asia" href="#" coords="392,61,30" shape="circle">
</map>

Note: to know the width and height of an image usually you just have to give the image
file a right click, in the File Explorer, and look at the properties.