Monday, March 18, 2019

Creating a Clickable Area within an Image using the Image Map HTML Code


1. Upload the image into the File Cabinet
  • Documents > Files > File Cabinet


2. Click Edit beside the uploaded image
3. Take note of the URL and this will be used later
4. Create a new Campaign template
5. Navigate to Lists>Marketing>Marketing Templates>New
6. Select Type = Campaign
7. Enter a Name for the template
8. Select Text Editor under the Template tab
9. Click the button on left side of the Font selection field to switch to Source editing mode.
10. Enter the following code for the image:

<img src="Insert Image URL" alt="enter name of image" usemap="#name of image">
<map name="name of image">
<area shape="rect" coords="X1,Y1,X2,Y2" alt="Name of Target URL" href="enter Target URL">
</map>
To get the coords or coordinates, open the image in MSPaint or any image editor with pixel mapping.  Point to the upper left portion of the area that needs to be associated with the url to get the first 2 coordinates.  Point to the lower right area for the last two coordinates.
For multiple clickable areas, just repeat the area shape code format.

11. Click Save.

No comments:

Post a Comment