Presentation of the software

Purpose of the software and aimed public

This software lets you create image maps for the web, in other words, just images where we define clickable areas. Mcc with HTML Mapper, you can create these zones with the mouse, making it easier to work when they are complex (eg if you want to make clickable the departments of France).

Anyone can use this program, there is little to know about HTML. Only certain concepts explained in this manual, however, may be useful for optimal use of the program.

All technical terms are defined in the glossary at the end of the manual.
Terms defined in the glossary are written in the manual in the following font : term.
Terms from the program interface are written in the manual in the following font : term.

The menus

The program menu is very traditional. Indeed, like most programs, it has the following menus:

Toolbars, containing the submenus for each menu are also available. You can move or hide (by clicking the right mouse button above or on the menu).
Most of the sub-menus are associated with keyboard shortcuts defined in "Appendices".

The interface

The main interface is divided into six views.

All these elements will be described in more detail in the next section. It is possible to resize each view (or even hide) by using the splitters between each one.

Using the software

Starting the program

The program starts in two ways, either by double-clicking the .exe file (or via a shortcut) or by the command line. Users familiar with the console (or terminal) can then launch the program with the list of files to open as an argument (pictures or .map files).

Management of maps

A map is a simple file containing the minimal HTML code generated by the program. The list of open maps is available via the Maps explorer.

Creation

To create a map, open an image by clicking on the button Open image. A file selection window will then appear, allowing you to select an image to load. It must be in one of the following formats: png, gif, jpg, jpeg, bmp, mng, tiff or ico. Once the image is chosen, it will appear in the scene, the code will appear in the HTML viewer and the basic properties of the image will appear in the table Image properties table. These properties are the following :

It is not possible to remove these basic properties, but their values ??can be changed. To do this, you must double-click on the box (second column) and change the text in it and then press Return.

Other properties can be added, to do this, you must click on the button Add. A line will appear. The first cell line is the name of the property chosen in the list and the second is its value. For example, if you choose style in the list and if you type border:solid; in the cell, the following code will be added for the image : style="border:solid;".
Properties added in this way are freely removable by using the button Delete.

Saving

When necessary, the map can be saved on the hard disk. To do this, simply click on the button Save or Save as. The first button allows you to quickly save the map when it has already been saved, while the second button lets you choose where to save via a file selection window. The first button has the same comprtement as the first if the map has never been saved.

Closing

To close the current map, use the button Close. If the map has not been saved, a window asks for confirmation and asks to save before closing.

Opening

A map which has already been saved can be opened using the button Open map. It is also possible to use the Recent menu to reopen a map or an image.

Editing a map

Items management

An item is in the software, is a shape drawn on the scene and the properties associated with it. There are only three types of shapes: rectangle (button Rectangle), the circle (button Circle), the polygon (button Polygon) and finally the free hand drawing (button Free hand).

To draw a shape, select a drawing tool, click and hold the click, and once the desired shape is drawn, release the click. For the polygon, you have to double click to finish the shape. For the freehand tool, it is possible to choose the smoothing via the submenu associated with the button. The higher the smoothing, the higher the number of points of the shape will be high (what will weigh down the document).

To delete a shape, use the selection tool (button Selection), click the shape and click Delete.

To move a shape, use the selection tool, click the shape, hold down, move the mouse. It is also possible to use the keyboard, for details, see section Keyboard shortcuts.

The properties of the current item displayed in the Item's properties table. Its functioning is similar to the Image's properties table. It differs only by the non-removable properties :

It's possible to navigate betwwen items by using the buttons Previous item and Next item.

Standard actions Copy, Paste and Cut are availables for the items. However, the system clipboard is not used by these operations.

You can resize circles and rectangles by using the resizers (). For polygons, it is possible to move each control point (). These can be deleted or added (see section Keyboard shortcuts).

Management of coordinates

As said before, it is possible to specify the coordinates of a shape by hand. However, they must follow a certain syntax that depends on the shape's type. Thus we have :

Shape's type Syntax Meanings of variables
rect x1,y1,x2,y2
  • x1 : x coordinate of top left point of the rectangle
  • y1 : y coordinate of top left point of the rectangle
  • x2 : x coordinate of bottom right point of the rectangle
  • y2 : y coordinate of bottom right point of the rectangle
circle x,y,r
  • x : x coordinate of the center of the circle
  • y : y coordinate of the center of the circle
  • r : radius of the circle
poly x1,y1,...,xi,yi,...,xn,yn
  • xi : x coordinate of point i of the polygon
  • yi : y coordinate of point i of the polygon

Coordinates are defined relative to the upper left corner of the image (coordinate 0,0).

Color management

You can change the color of items to adapt to the image you want to map. To do this, use the Item color menu. When clicking on this menu, a color dialog will appear. The color of the icon associated with this menu changes depending on the selected color.
To change the color of a particular item, select it and choose a color. To choose the color that will be used for items to draw later, do not select any item and choose a color.

Management of the antialiasing

For more fluidity on on little powerful machines, it is possible to disable the antialiasing, to do this you have to uncheck the button Enable/disable antialisaing.

Management of the zoom

When the image size is not suitable for creating shapes properly, you can zoom in or zoom out for this, use the buttons Zoom in et Zoom out. To restore the normal zoom (100%), use the button Normal zoom.

Exporting to HTML

An interesting feature of the program is the HTML export, it's so possible to create web pages with its map inside without knowing the language. To open the window of export, click the button Export as HTML. A window is then going to appear :

This window lets you specify :

You can see the results by clicking on the button View in browser< pan>. A HTML page will then be created and launched in the default web browser of your computer. If the page is suitable, you can save it by using the Save button.

The HTML templates

By default, minimalist templates are available, depending on their doctypes. They are :

To create a new template, it is necessary to create a .tpl file and place it in the share/tpl/ directory.
The software is going to replace certain special character strings (variables) to insert the adequate data instead. These variables are the following ones:

None of these variables is absolutely mandatory, but a template which is not using the {{MHM_MAP_CODE}} variable is obviously useless.

The HTML export module produces valid code according to the W3C for the default templates.

Changing the language

The program is currently only available in two languages : français (button Français) et english (button English). It is necessary to restart the program so that the interface is updated.

Appendices

Glossary

Keyboard shortcuts

Action Keyboard shortcut Corresponding button
Open image Ctrl+O
Open map Ctrl+M
Save Ctrl+S
Save as Ctrl+Shift+S
Export as HTML Ctrl+Shift+H
Close Ctrl+W
Quit Ctrl+Q
Zoom in Ctrl++
Zoom out Ctrl+-
Normal zoom Ctrl+0
Enable/disable antialising Ctrl+Shift+A
Item color Ctrl+Shift+C Icône de couleur
Previous item Shift+Tab
Next item Tab
Cut Ctrl+X
Copy Ctrl+C
Paste Ctrl+V
Delete Suppr
Undo Ctrl+Z
Redo Ctrl+Y (or Ctrl+Shift+Z with Mac OS X or Linux)
Selection tool S
Rectangle tool R
Circle tool C
Polygon tool P
Free hand tool F
Displacement of the current shape (1px step) Arrow key None
Displacement of the current shape (8px step) Shift+Arrow key None
Resizing of the current shape (1px step) Alt+Arrow key None
Resizing of the current shape (8px step) Alt+Shift+Arrow key None
Addition of a polygon point Ctrl+Clic on an empty zone None
Deletion of a polygon point Ctrl+Clic on a polygon point None
Show help F1

Contact

To indicate me a bug, propose me an improvement or other thing, contact me at the following email address macsou@gmail.com or via the form http://mhm.fr.nf/?page=contact.