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:
Adding the Macros
Select “+” => Other macros
Type in “html” in the Search box
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:
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.
Last updated