Skip to main content
All CollectionsNexl Engage
Linking Sections of an Image to URLs
Linking Sections of an Image to URLs

Creating interactive image maps

J
Written by Jenn Gopez
Updated over 2 months ago

This help article will guide you through linking specific areas of an image to different URLs, creating an interactive image map. This can be useful for adding clickable hotspots or highlighting specific call-to-action areas within an image.

Objective:

To make specific areas of an image clickable, allowing users to navigate to different URLs or email addresses when they click on those areas.

Step-by-step guide:

  1. Drag and drop an HTML content block to the stage.

  2. Get the image section coordinates using an image editor such as MS Paint.

  3. Enter the code in the HTML content block:

    <img id="responsive-img" img src="https://sample.jpg" alt="book a demo" usemap="#book" width="600" height="749" style="max-width: 100%; height: auto;">

    <map name="book">
    	<area shape="rect" coords="183,511, 419,567" alt="book a demo button" href="https://example.com/book-a-demo/">
    	<area shape="rect" coords="219,700,381,716" alt="contact email" href="mailto:[email protected]">
    </map>

    Code Explanation:

    • id="responsive-img": Assigns an ID to the image for potential styling or referencing later.

    • src="https://sample.jpg": Specifies the URL of the image file. NOTE: Removing an image from its source location will result in it not appearing in the design.

    • alt="book a demo": Provides alternative text for screen readers and when the image fails to load.

    • usemap="#book": Links the image to a map with the name "rsvp".

    • width="600" height="749": Sets the initial width and height of the image.

    • style="max-width: 100%; height: auto;": Ensures the image scales responsively to fit different screen sizes.

    • name="book": The name of the map, which corresponds to the usemap attribute in the <img> tag.

    • <area> tags: Define the clickable areas within the image.

    • shape="rect": Specifies the shape of the clickable area (rectangle in this case).

    • coords="183,511,419,567": Defines the coordinates of the clickable area. The coordinates represent the top-left and bottom-right corners of the rectangle.

    • alt="book a demo button": Provides alternative text for screen readers and when the image fails to load.

    • href="https://example.com/book-a-demo/": Links the area to the specified URL.

    • href="mailto:[email protected]": Links the area to the specified email address.

Guidelines & Best Practices:

  • Email Client Compatibility: Image maps are not universally supported by all email clients. Some clients may not display the clickable areas correctly, or at all.

  • Accessibility: Always provide alternative text (alt attribute) for each image map area to ensure accessibility for screen readers and users with visual impairments.

  • HTML Code Block in Email Templates: Using HTML code blocks within email templates can lead to potential issues, especially with email client rendering. Avoid complex HTML code blocks that might cause display inconsistencies across different email clients. Use CSS for styling whenever possible, but be aware of CSS limitations in email clients.

  • Testing: Always thoroughly test your email templates across various email clients and devices to ensure the image maps function correctly.

Did this answer your question?