The Image Map Editor option allows you to create “hotspots” on images. This means you can have multiple hyperlinks to different locations on one picture.

In this example we are using a team photo that links to individual bio pages for each agent, however image mapping can be used for many purposes, such as a county map that links to infomation on each community.

To begin you will need to upload a photo and insert it in the page you are editing.

In the below example you can see we have already added “Hotspots” for most of our team members. Each circle (or rectangle) represents a “hotspot” or hyperlink.


Creating a Hotspot

To add a “hotspot” right click on the photo and a menu will open, select Image Map Editor.


The Image Map Editor will open and any hyperlinks already mapped on the image will appear highlighted in blue. Clicking on one of them will display the details of the Hyperlink (Hotspot) on the right of the page.


  1. Image Src – Displays the location the image is hosted
  2. Create Area – This allows you to select the area you wish to make a “hotspot”. Select the shape you wish to use and click the Create Area button. This will create a new “hotspot” on the image in the top lefthand cornor. See step 3 for instructions on how to use the Selected Area Properties or your mouse to position the “hotspot”.
  3. Selected Area Properties – Left, Top, Width, Height – Allows you to enter the size and location of the “hotspot”. You can also left click and drag the area using the below instructions:
    • To Resize hover your mouse over the small red square until your curser is two arrows pointing left and right and the drag your mouse to the size you would like.
    • To Move the area hover your mouse over the area until the curser is four arrows pointing in every direction and then drag the area to the location you would like.
  4. Selected Area Properties – URL and Target – When people visit your site and click in this area of the picture they will go to whatever url you enter here. The Target section allows you to enter how the link will open. In the the example above we have selected “Same Window” which means when clicked this link will replace the current page.
  5. Selected Area Properties – Comment – Whatever is entered here will appear when a visitor to your site hovers thier mouse over the picture.
    In this example we have entered the name of the agent.
  6. Action Buttons – The buttons at the bottom of the page allow you to:
    • Update Area – Allows you to save any changes youve made and contiune working
    • Remove Area – Removes whatever Area you are working on currently
    • Remove All – Removes all areas
    • OK – Updates all your changes and closes the window
    • Cancel – Cancels all changes and closes the window
  7. Repeat steps 2 to 6 to create another hotspot.

Important:  Saving the image will not save the changes done to the page. Be sure to click Ok to save the changes.  For more information see Editing a Web Page.