Top Producer® Websites: Mapping an Image with More Than One Hyperlink

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 represents a “hotspot” or hyperlink.

imagemapping

Creating a Hotspot

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

menu

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

imagemapeditor

To create a new hotspot area, select either Rectangle or Circle and click New Area. The new area will appear in the image.

  • 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.
    curser
  • 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.
    movecurser

Once you’ve selected a hotspot, enter the desired URL into the URL field and click Update Area to save the URL to that hotspot.

When you’re done adding hotspots, click the OK button to save your changes.

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.

Log in to map an image with more than one hyperlink.


Please rate this post

Click a star to rate this post out of five:

Average rating 1 / 5. Vote count: 1

No votes so far! Be the first to rate this post.

Sorry that this post was not useful for you!

Let us improve this post!

How can we improve this post? Please include your name and contact details if you would like us to reach out to you.


Still have questions? Please contact us at the information below.