Content Editor - Image Map Editor

The Image Map Editor lets you set up links in specific areas of an image. This eliminates the need to combine multiple clickable images to make them look like one big image. This feature can be seen in the Design section of your website’s Content Editor.

Image Map Editor - The Basic Layout

To access the Image Map Editor, open your Content Explorer and select the page you want to edit. Click the Image Map Editor button to bring up the Image Map Editor window./p>

The Image Map Editor window gives you the ability to select and configure the image you want to map. It is divided into four sections:

  • Preview - Displays the image and the highlighted areas that will be made clickable.
  • Choose Image - Lets you select the image to be mapped.
  • Select Area Shape - Gives you the option on what shape you want to use during image mapping. You can choose between a Rectangle or Circle area shape. It also allows you to remove the initial area you created via the New Area button.
  • Define Area Properties - Allows you to set the location and size of the image map and specify its URL. It also lets you open the URL in a different window as well as add an Alt Text to the link.

Using the Image Map Editor

In the Choose Image section, click the Image Manager button to select the picture you want to map.

The selected image will appear on the Preview screen on the left. After selecting your image, you will need to determine the area shape you plan to use. You can choose to use either a Rectangle or Circle as your area shape. Once you’ve made your choice, click the New Area button to start mapping your image.

The selected area shape will appear on the Preview screen. This shape can be moved and re-sized manually by dragging it in the Preview screen.

You can also customize the size and location of the selected area shape by using the Define Area Properties section.

Once you’ve set the size and location of your area shape, type the URL it will link to. You have the option of typing in an Alt Text and to specify whether the link will open in the same window or in a new one.

Click the OK button to save your work. Once live, clicking on the mapped area of the Builderwire product box will now allow visitors to open Builderwire’s official website in a new browser window.

 

Top