An image map is a way to create clickable areas within a single image.  The clickable areas could be links, text pop ups, or longer form text to explain what is in the image.  MoxiWebsites gives you the tools to create an image map and place it into a web page you create for your site.  Here is how to create an image map within your Websites application.

Creating an Image Map

Image Map Options

Placing an Image Map on a Site Page

Creating an Image Map

Log into your Agent Website Admin Tool.

From the menu, select Image Map --> Add new image map

At the top of the screen, title your image map. 

Select the Choose File button to import the image you wish to map. 

Once your file is uploaded, select the Publish button on the right side of the screen.   

Publishing does not show your page on your website. You can continue to work on it without anyone seeing it until you choose.

The image now appears on the screen.

Creating a new shape on the image by clicking the image of the image map.  Create a rectangle by clicking your mouse to create the four corners of the rectangle.  The last click connects the fourth corner with the first corner.   The image will have a border and a lighter appearance than the rest of the picture. 

Select the Add Area button in the Add Area section to confirm the rectangle you created is what you wanted. 

Under Areas, name the area you created and select Save. 

Repeat this process for each area on the image you wish to create.

Image Map Options

Once you have created your areas, you have options to emphasize the area when selected.

Select Edit page in the selected area.  

You may want to right click on the Edit Page link and choose to open the link in a new tab. It prevents having to go back and forth to edit the areas you have created.

On the Edit Image map area screen, you can select a highlight color for when a user hovers on an area and choose what happens when someone clicks on the area.

On the Highlight area, choose a Highlight style.  This will change the image area the color you choose when someone hovers over that part of the image.  You can create your own highlight style as well.

The Mouse event area gives you a choice of what happens when a user clicks on the area of the image map.  You can choose to link it to another webpage, have a tooltip pop up, or have a popup window appear.  The right side of the screen will change depending on the choice you make. 

When you have selected the highlights and mouse events for the area, select the Update button from the Publish area of the page.

Repeat this for each area that you create in your image.

Placing an Image Map on a Site Page

Once the image map is created, you can place it on a web page.

Select Create New Page from your Admin Dashboard.

In the Add New popup box that appears, keep the Custom Page choice and select the Submit button. 

On the Add New Page screen, put in a title for the page and select the Add Media button. 

On the Actions menu of the Add Media page, select the Image map choice. 

Select the image map you wish to insert in the web page.

You will see the image map code on the screen.  Add any other code you wish to or use the Page Builder to add additional items to the page.  

On the Add New Page screen, select the Publish button.

To view the page, under your Site Pages, select the Image Map page. Beneath the page title, select View.