HTML Image Map and HTML Image Area

Description

Image Maps and Image Areas work together. An Image Map is related to an image on your page. The Image Areas inside the map describe certain sections of the image. See the following illustration:

On your page, in Edit mode, this will look something like this:

Each area can have a certain shape and link to a custom URL. You can add several Image Areas to an Image Map.

The HTML Img “Usemap” field specifies the name of the related Image Map. Each Image Area is then applied to that image. In order to make this work you need:

Element	Property/Field	Value	Example	Comment
HTML Img	Usemap	Map Tag name	#myMap
HTML Image Map	Name	The Usemap value from the HTML Img element	myMap
HTML Image Area	Shape Coords Href Alt	Circle, Polygon or Rectangle The coordinates withing the image The URL to link this area to An alternative text for this link	rect 0,0,82,116 http://www.lewe.com Lewe.com	Several Image Areas can be inside one Image Map

Adding the Macros

1. Select “+” => Other macros

2. Type in “html” in the Search box

3. Select the “HTML Img”, “HTML Image Map” and “HTML Image Area” macros (each at a time).

HTML Img

Add an HTML Img element to your page. Select the image and specify the map name in the “Usemap” field, in the above example that would be “#myMap”.

See more details here.

HTML Image Map

Add the HTML Image Map macro and enter the name as you have specified it in the HTML Img element, but with the hash. In this example that would be “myMap”.

HTML Image Area

Add as many HTML Image Area elements inside the HTML Image Map body as you want to have sections in your image.

See the macro options below.

HTML Image Map Macro Options

Name

Enter the name of the map. It must match the Usemap name of the image (without the hash).

HTML Image Area Macro Options

Form

Select from Circle, Polygon or Rectangle.

Coordinates

The values in this field depend on the shape you have chosen:

Shape	Format	Description
Circle	x,y,radius	X and Y specify the coordinates of the center of the circle. Radius defines the radius of the circle.
Polygon	x1,y1,x2,y2,..,xn,yn	Each X/Y pair specifies the coordinates of a point in your polygon. If the last pair is not the same as the first (to close the polygon), the browser will add the last coordinate pair to close the polygon.
Rectangle	x1,y1,x2,y2	Two X/Y pairs, specifying the coordinates of the upper left (first pair) and lower right (second pair) corner of the rectangle.

Link

Specify a full URL that this section of the image should link to when clicked.

Link Relation

Select the link relation of the link. Leave empty if not sure.

Link Target

Select where the link shall be opened.

Target	Description
blank	The link is loaded in a new window or tab.
parent	The link is loaded in the parent frame (in case of a frameset).
top	The link is loaded in the full body of the window.
self	The link is loaded in the same frame that it was clicked.