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:
- File : allows you to manipulate documents
- Edit : allows you to manipulate data in the current document
- View : allows you to change the display of the current document
- Tools : allows you to use the tools available to edit the current document
- Language : allows you to change the program language
- ? : allows you to get more information about the program
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.
- A : the documents explorer : allows to change document among those open.
- B : the properties of the image of the map.
- C : the properties of the current item.
- D : the scene where is made the management of items and drawing of the image of the map.
- E : the HTML viewer which displays the HTML code corresponding to the map.
- F : the status bar displaying various informations (image size, position of the mouse, size of the current item).
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 alt, src and usemap.
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 alt, coords, href and shape.
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 |
|
| circle | x,y,r |
|
| poly | x1,y1,...,xi,yi,...,xn,yn |
|
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 :
- The template : it is the model of the web page where are going to fit the chosen data and the code of the map.
- The encoding : it's the type of encoding to use to represent characters on the page.
- The title of the page, displayed in the title bar of the browser.
- The description of the page.
You can see the results by clicking on the button View in browser. 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 :
- html4.01strict.tpl
- html4.01transitional.tpl
- html5.tpl
- xhtml1.0strict.tpl
- xhtml1.0transitional.tpl
To create a new template, it is necessary to create a .tpl file and place it in the share/tpl/ folder.
The software is going to replace certain special character strings (variables) to insert the adequate data instead. These variables are the following ones:
- {{MHM_LANG}} : is the selected language in the program.
- {{MHM_ENCODING}} : is the encoding of characters selected in the HTML export window.
- {{MHM_DESCRIPTION}} : is the description entered in the HTML export window.
- {{MHM_SOFTWARE}} : is the name of the program followed by its version.
- {{MHM_TITLE}} : is the title entered in the HTML export window.
- {{MHM_MAP_CODE}} : is the HTML code of the current map.
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.
Issues related to the address of the image
The address of the image (the src attribute) can be relative or absolute. An absolute address begins with file :///. A relative address indicates the address of the image relative to the location of the HTML file of the map. For example, if the map is in the HTML file named 'map.html' placed himself in the folder 'maps' and the relative address of the specified image is 'images/img.png', the image 'img.png' will be in the folder 'maps/images/'.
In the program, the use of absolute addresses is no problem when previewing or saving in HTML if the HTML file is not intended to be published on the Internet. If it must be the case, it is necessary to make the address of the image relative in the HTML code.
Using relative addresses within the software, for cons, disable the HTML preview. It must then export the map to the right place relative to the location of the image and display manually the HTML page in the browser. In this way, Internet publishing involves no change in code.
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
Vocabulaire technique
- Antialiasing : computer technology to smooth lines and images.
- Clipboard : area of ??computer memory used to store the items copied into programs.
- Doctype : type of an HTML document.
- HTML : stands for Hyper Text Markup Language, it's the language used for describing web pages.
- Item : in Mcc HTML Mapper, an item is a drawn shape associated with its properties.
- Map : it's an image on which we defined clickable zones.
- Splitter : GUI component for resizing elements of the interface.
- View : part of a graphic interface displaying data.
HTML attributes
The Doctype column indicates in witch doctype (HTML 4.01 or XHTML 1.0) the attribute is allowed. S=Strict, T=Transitional and F=Frameset.
Les informations présentes dans les quatre tables qui suivent ont été récupérées puis adaptées depuis les deux pages suivantes :
Mandatory attributes (in the software)
| Name | Values(s) | Description | Tag(s) | Doctype(s) |
|---|---|---|---|---|
| alt | Text | Spécifies an alternartive text | img, area | STF |
| coords | Coordonnées | Specifies the coordinates of an area | area | STF |
| href | Adresse internet (URL) | Specifies the destination of a link in an area | area | STF |
| shape | Among : default, rect, circle, poly | Specifies the shape of an area | area | STF |
| src | Internet address (URL) | Specifies the destination of a link in an area | img | STF |
| usemap | #mapName | Specifies an image as a client-side image-map | img | STF |
Optional attributes
| Name | Value(s) | Description | Tag(s) | Doctype(s) |
|---|---|---|---|---|
| align | Among : top, bottom, middle, left | Specifies the alignment of an image according to surrounding elements | img | TF |
| border | Size in pixels | Specifies the width of the border around an image | img | TF |
| height | Size in pixels or percentage | Specifies the height of an image | img | STF |
| hspace | Size in pixels | Specifies the whitespace on left and right side of an image | img | TF |
| ismap | Among : ismap | Specifies an image as a server-side image-map | img | STF |
| longdesc | Internet address (URL) | Specifies the URL to a document that contains a long description of an image | img | STF |
| nohref | Among : nohref | Specifies that an area has no associated link | area | STF |
| target | Among : _blank, _parent, _self, _top | Specifies where to open the linked page specified in the href attribute | area | TF |
| vspace | Size in pixels | Specifies the whitespace on top and bottom of an image | img | TF |
| width | Size in pixels or percentage | Specifies the width of an image | img | STF |
Standard attributes
| Name | Value(s) | Description | Tag(s) | Doctype(s) |
|---|---|---|---|---|
| accesskey | Character | Specifies a keyboard shortcut to access an element | area | STF |
| class | Classname | Specifies a classname for an element | img, area | STF |
| dir | Among : rtl, ltr | Specifies the text direction for the content in an element (rtl : right to left, ltr : left to right) | img, area | STF |
| id | Id name | Specifies a unique id for an element | img, area | STF |
| lang | Language code | Specifies a language code for the content in an element | img, area | STF |
| style | CSS code | Specifies an inline style for an element | img, area | STF |
| tabindex | Number | Specifies the tab order of an element | area | STF |
| xml:lang | Language code | Specifies a language code for the content in an element, in XHTML documents | img, area | STF |
Javascript event attributes
| Name | Value(s) | Description | Tag(s) | Doctype(s) |
|---|---|---|---|---|
| onabort | Javascript code | Script à exécuter lors du chargement d'une image est interrompu | img | STF |
| onblur | Javascript code | Script to be run when an element loses focus | area | STF |
| onclick | Javascript code | Script to be run on a mouse click | img, area | STF |
| ondblclick | Javascript code | Script to be run on a mouse double-click | img, area | STF |
| onfocus | Javascript code | Script to be run when an element gets focus | area | STF |
| onmousedown | Javascript code | Script to be run when mouse button is pressed | img, area | STF |
| onmousemove | Javascript code | Script to be run when mouse pointer moves | img, area | STF |
| onmouseout | Javascript code | Script to be run when mouse pointer moves out of an element | img, area | STF |
| onmouseover | Javascript code | Script to be run when mouse pointer moves over an element | img, area | STF |
| onmouseup | Javascript code | Script to be run when mouse button is released | img, area | STF |
| onkeydown | Javascript code | Script to be run when a key is pressed | img, area | STF |
| onkeypress | Javascript code | Script to be run when a key is pressed and released | img, area | STF |
| onkeyup | Javascript code | Script to be run when a key is released | img, area | STF |
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.