“HTML5 canvas Image Mapper” Documentation by “Giacomo Grande”


“HTML5 canvas Image Mapper”


Table of Contents

  1. Introduction
  2. What is an Image mapper
  3. Select an image
  4. Draw a shape
  5. Set shapes parameters
  6. Generate HTML code
  7. Load HTML code

A) Introduction - top

This is an HTML Image Mapper tool, designed for web developers. This tool has been developed using the HTML5 canvas feature and also the File API's, that are implemented only on the most modern browsers, especially Firefox and Chrome. I have developed the tool using the Firefox version 14, because I have noticed that there is a problem using the canvas with the Firefox 15 and erlier (there is also a tiket opened for it, that will be fixed in the Firefor version 18)

I suppose that this is not a big problem for a developer, that can choose the appropriate browser to use this tool. I have introduced a feature check in the code, that will advertise you if you are using a browser that doesn't support the canvas and/or the File API's.



B) What is an Image mapper - top

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:


<img src="image1.png" width="145" height="126" alt="map example" usemap="#image1map" />
<map name="image1map">
<area shape="rect" coords="0,0,82,126" href="area1.html" alt="area1">
<area shape="poly" coords="108, 145, 174, 71, 205, 139, 153, 192" href="area2.html" alt="area2">
<area shape="circle" coords="124,58,8" href="area3.html" alt="area3">
<area shape="default" href='default.html' alt = "the whole image"/>
</map>

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.


C) Select an image - top

You can select a local image or a remote image, using the specific buttons. To select a local image you can click on the "Select" button: a file browser will open to select your local file.
To select a remote image you have to write the url in the input line and then click on the "load" button.
In both cases the image will be loaded in the canvas, surrounded by the grey-dashed border, that will have a role also in the shapes wrading, as we will see.
You can load images of all sizes: if the sizes of the image will be greater than a maximun fixed in the style.css files, the horizontal and/or the vertical scroll bars will appear to allow you to scroll the image.
Moving the mouse on the image you can see the mouse coordinates above and below the image rectangle. The coordinates are relative to the top-left corner of the image. If you move the mouse on the border you can see that one coordinate is fixed and the other changes. The borders reflect the edge values of the coordinates and will be used also in the drawing process, as we will see.
When the image is loaded in the page, a tool bar will appear on the left of the screen and a setting area will appear on the right of the screen. You can also see a textarea on the bottom, that will contain the HTML code relative to the shapes coordinates, as soon as you will draw them. The code will be modifyid on fly when you do some shape modification.


D) Draw a shape - top

To draw the shapes on the image you have to use the tool bar, on the left side of the screen. The following are 2 screenshots of the tool bar, that shows you all the tools available:



The following is the description of each tool:


If you need to draw contiguous shapes (this is especially true for polygon shapes), that share some points, you can generate the code, copy the already drawn shape in a new row, remove the needless coordinates, load the code. In this way the portion of the new shape contiguous to the previous one will be drawn on the image and you can continue to draw it, selecting it and modifying it as described above. Take into account that you need to set at least 3 points to draw a polygon. So, if you want to draw a new polygon, that share 2 points with an already drawn polygon, you can create a new row in the code with the shared 2 points, add a third point in an arbitrary position, load the code, select the new polygon, click on the arbitrary set point and move it in its right position. I suggest to set always one more point, with arbitrary coordinates, also if you have more than 2 points already in place. This arbitrary point can be moved in its right position after selecting the polygon.


E) Set parameters - top

You can set several parameters to the image, to the map and to the shapes. This can be done using the right side panel, that you can see in the following screenshot:

The following is the description of each field:

As soon as you set the parameters, you can see the modifications in the HTML code present in the textarea.

All these parameters can be also set manually in the generated code, with the same effort. The usefulness of the Image Mapper is not in these features, that have been added just for completeness, but in the coordinates calculation, that requires a big effort if done manually.

F) Generate HTML code - top

As soon as you load an image, on the bottom side of the screen you can see a textarea with just the "map" tag. As soon as you draw a shape on the image you can see the HTML code that reflects the shapes coordinates. All the modifications to the shapes will be immediately relfected in the HTML code; also the parameters on the right side will be immediately reflected in the HTML code. You can hide and show the textarea using the respective buttons on the bottom left.


G) Load HTML code - top

As already stated, the load button can be used to load an HTML code, that will be translated in shapes drawn on the image. The load button will appear only if the textarea is visible. You can take advantage of the load button to save partial mapping session and copying the saved code in the textarea later, to continue the work. You can also use it to refine the coordinates manually, if needed: after clicking on the map button you can modify the generated code on the fly and click on the load button to reflect the changes in the drawn map on the image.
If you zoom in and out the image, the coordinates that you see in the text area reflect the target sizes of the image, not the current sizes. So, if you want to touch the coordinates manually you have to take care of that. To simplify the refining of the coordinates,you can temporarely modify the target sizes of the image (in the right-side panel), adjust the coordinates, re-load the code and then re-set the target sizes to the right value. What is important is that you use the right target sizes when you generate the final code, that you will use in your HTML page(s).

Note:

If you change the target sizes when the textarea with the HTML code is opened, you can see that the coordinates changes. Take into account that you have to modify both the width and the height of the target image to have the correct coordinates, although you can see the change as soon as you modify one of them.


Giacomo Grande

Go To Table of Contents