How to insert a link in a selected area of an image (image map)

You can insert a link in a certain area of an image by using the "Image Map Editor". However, please note that image maps are not supported by all email clients, and therefore we do not recommend them that you use them as the only way to link to those pages/files. Specifically, Hotmail no longer supports image maps. See the bottom of this message for more information on this.

ADDING AN IMAGE MAP

To add a link in a selected area of an image, follow these steps:

  • Log into your administration console and locate the message to edit
  • Click on the icon to edit the message
  • In the HTML editor, select the image and then click on the Image Map Editor icon in the HTML Editor Toolbar
  • In the Image Map Editor, click on "Create Area"
  • Draw a rectangle or circle area on top of the image: that will be the link area
  • Enter the destination URL in the "Link" field and choose a target (typically a new/blank page)
  • You can add more than one link areas.
  • When you are done, click on OK.
  • Save the message
You can check that the image map is working as expected by previewing the message (e.g. click on the message name in the page that lists all saved messages or on the preview icon in the HTML editor).

HOTMAIL NO LONGER SUPPORTING IMAGE MAPS

Please note that image maps, which allow you to have different areas of an image link to different URLs, are no longer supported by the latest version of Hotmail.
[Source: http://www.emailonacid.com/blog/details/C13/3_things_you_need_to_know_about_hotmails_latest_release ]

Given the popularity of Hotmail(*), we recommend that you no longer use image maps. If you do, when a Hotmail user were to mouse over the image and click, nothing will happen. A regular image link will work just fine (<A> tag wrapped around the image).

Image maps can be created, edited, and removed using the built-in editor. In the editor, click on the "Image Map Editor" button. To remove an image map, click on "Remove All".

To replace an image map with a simple link: remove the image map as described above, then select the image in the editor and click on the "Insert Link" button.

If you absolutely need different areas of an image to link to different URLs, one way to get around the problem is to slice up the image and recompose it using an HTML table. The individual images can now link to different URLs. The problem is that there can be unexpected and unwanted spacing between images in both Hotmail and Gmail too. For tips on how to avoid these spacing issues, we recommend the following useful article:

http://www.emailonacid.com/blog/details/C18/12_fixes_for_the_image_spacing_in_html_emails

(*) According to comScore (August 2010) Windows Live Hotmail - which is available in 36 languages - is the world's largest web-based email service with nearly 364 million users. Second and third are Yahoo! Mail (280 million) and Gmail (191 million).