Draw Attention Pro turns images into interactive maps

Draw Attention Pro is the Pro edition of Draw Attention, an interactive image map add-on for WordPress. Add hotspots to image regions so users can explore details, view related content, or follow a link. Use image maps for real estate floor plans, trade show maps, infographics, product tours, tutorials, sketch annotations, affiliate content, and WooCommerce product features.

Hotspot shapes and responses

In the WordPress dashboard, choose or upload an image and draw polygon, rectangle, or circle hotspots over it. Zoom and pan tools help with placement. You can edit shapes later or recreate them when an image map changes.

Set an area to reveal information when visitors click or tap it, or when they move a mouse over it. Its content can include text, images, shortcodes, galleries, video, audio, and other content. A hotspot can also link to another URL.

Map layouts and styles

Create multiple image maps, each with an unlimited number of highlightable areas. Use separate maps for various properties, products, diagrams, locations, or sections of a visual guide.

• Present annotations in a tooltip or lightbox.
• Keep hotspot areas highlighted so visitors can see which regions are interactive.
• Set different colors, borders, and opacity for individual hotspots.
• Choose from 20 preset color palettes or set a custom color scheme.
• Maps resize to fit the theme and available screen size, including tablet and mobile shows.

Keyboard, screen reader, and fallback access

Hotspots can be reached with keyboard commands, and screen readers can access the content. The add-on uses progressive enhancement, with a standard image-map fallback that keeps content accessible when JavaScript is disabled.

Publishing and setup

Add a completed image map to a page or post with a shortcode, the WordPress Editor Block, or the Beaver Builder module. These options let you place interactive visuals in landing pages, product information, documentation, blog content, property listings, and other website sections.

To set one up, install Draw Attention Pro in WordPress and open it from the dashboard. Create an interactive image, upload or select the image, and draw the polygon, rectangle, or circle hotspots. Add each area's content or link, colors, and display options. Publish the map with a shortcode, block, or Beaver Builder module, then review it on desktop and touch devices.