HTML5 canvas Image Mapper

Last Update: 15 October 2012
Regular License: $8
Extended License: $40
Sales: 15

This is an html image mapping designed for web developers. The tool has been developed using the HTML5 canvas, so its use is limited to the browsers that support the canvas, but also the File API ’s: IE10 +, FF3 .6+, FF14 -, FF18 + (the FF15 have problems with some canvas functionalities, Bug 787623, that will be resolved in FF18 ), Chrome6+, Safari6+, Opera11.1+ Since this is a tool for developers, I think that this is not a big limitation, because I suppose that a web developer has no problem to choose an appropriate browser. I have used FF14 to develop the tool, so this is the best choise, but the tool has been tested also in Chrome22 and Opera12 Note: The version of the tool that you can see in the Live Preview link, is a limited version of the tool. With this version you can only load a specific set of images, listed on the home page. After loading an image you can draw all the shapes, but only the first 6 shapes will be generated in the HTML code. This limitation doesn’t prevent you to test all the functionalities of the tool.

What is an image map?

An image map is an HTML code that makes user-clickable different areas of an image. The HTML code consists of the map HTML tag, in conjunction with the area tag, that allows you to define areas with rectangular, polygonal and circular shapes. As an example, if you have the image1.png image in your HTML page, you can write the following code:

As you can see, you have to set the usemap attribute in the img tag, that will have the same value of the name attribute in the map tag. Between the <map> and </map> you can define as many <area> tags as you want, each one representing a user-clickable area on the associated image. Each area must have a shape attribute, that can have one of the 3 values: rect, poly and circle. The rect shape is completely defined by 2 points, a poly shape is defined by a sequence of points and a circle shape is defined by a point, that represents the center, and a radius. All the points are defined by a couple of coordinates, expressed in pixels, relatives to the top-left corner of the image. The shape attribute can also have the “default” value, that refer to the parts of the image not mapped with any of the previous shapes. Take into account, instead, that the order in which the shapes are defined in the map are very important: if you define the “default” shape as first shape in the map, it will override all the subsequent shapes, because the “default” shape refers to the whole image. This is true also with the shapes that overlap each other: you can define a little shape into a bigger shape, but you have to define first the little shape and then the bigger one. If 2 shapes share a portion of the image, the shape defined first, wins.

If you want to set manually an image map you have to know the coordinates of all the points needed to define the different shapes. Probably this is not a big problem if you have few areas to map, especially if you have circular or rectangular areas. But if you have several areas, with a polygonal shape, set them manually is not a simple task.

The image mapper tool allows you to draw shapes such as rect, poly, and circle on the selected image, that will be translated automatically in the corresponding HTML code that makes the areas of the image user-clickable.

After drawing the shapes on the given image, you can generate the HTML code simply clicking on a button and the code will be displayied in a textarea. You can copy the HTML code and use it in your HTML page(s). You can also do the reverse process: pasting the HTML code in the textarea, you can load this code simply clicking a button; this will be translated in the shapes on the image and you can modify them, add new shapes and re-generate the HTML code. This reverse mechanism is useful to allow you to save a partial mapping process and to continue to map the image later. It is also useful to refine “manually” the shape designing/positioning: after generating the code in the textarea, you can modify the coordinates in the textarea on the fly and re-load it.

Main features:

You can select a local or remote image You can set the target image sizes: these are the sizes that the image will have in your HTML page You can zoom in and out the image in any moment and this will not interfere with the real coordinates that will be generated, that depends only on the target sizes of the image. The zoom feature is only useful to help you to draw the shapes. You can set several parameters for each shape, such as the “href” attribute, the “alt” attribute, the “id” and “class” attributes and finally the “target” attribute. To set the parameter you have to select the shape: to select a shape you have to select the top-left arrow in the toolbar and then click on the shape. You can set some parameters for the map: the map “name”, the default url and the target. You can draw a shape selecting the shape from a tool bar. To draw a shape, after selecting it from the toolbar, you can simply click with the mouse on the image, where you want to start the shape. If the shape is a circle, the firts point is the center: moving the mouse (clicked or released), you can see a circle that follow the cursor. Clicking again the mouse will stop drawing the circle. If the shape is a rect. the first point is one of the corner. Moving the mouse (clicked or released) will draw a rect. Clicking again the mouse will stop drawing. If the shape is a poly the process is a little different: each click of the mouse will set a point; the current point is always connected with the firs one, making the poly always a closed shape; to stop to draw the poly (to set the last point) you have to double click the mouse. For all the shapes you can also stop to draw them clicking on the “stop” button (the top-left arrow in the toolbar). You can see the mouse coordinates when you move it on the image. You can use the gray-dashed border around the image to determine the edge coordinates of the image, so you can use the border as it was part of the image: so, you can click on the border during the shape drawing, jus as it was part of the image. For example, if you click on the top-left corner of the border, you will set a point at (0, 0) coordinates. If you click the left-border, in any point, you will set a point at the (0, y) coordinates, etc. You can select an already drawn shape and modify/resize/remove it. To remove it you have to use the “rubber” in the toolbar, that will appear as a turned down pencil only selecting a shape. You can select the color of the contour of the shapes from a set of 5 colors (this is not a design tool, so I have limited the number of color and also you cannot choose a different color for each shape). You can click on the “map” button, that is visible only when you select the “stop” button on the toolbar and no shape is selected: if you have some shapes drawn on the image you will see the HTML code in a textarea, if you have not yet drawn a shape you will see an empty textarea, but you can past in it some HTML code and load it. Clicking on the “load” button (that you can see only after clicking on “map” button), the HTML code present in the textarea will be translated in shapes on the image.

You can consult the complete manual of the tool at the following link:Online Manual

If you have any questions, just leave a comment or drop me an email!