Interactive Image Map Plugin – Draw Attention

Description

Draw Attention makes it easy to create interactive image maps for your website. Highlight sections of your images with hotspots so that users can click/tap or hover to read more information about each image map area. Show more content or direct the user to another URL upon clicking or hovering your hotspot.

The image map can contain more information such as images, text, shortcodes, gallery, video, audio, and more. Reveal more information on click/tap or hover. Create custom shapes for interactive hotspots directly on your original image.

Perfect for sketch maps, interactive floor plans for real estate, clickable infographics, sketch annotations, image tutorials, product feature highlights on WooCommerce, and more.

Image Map Features:

  • Draw Unlimited Hotspots: Highlight as many areas as you want in your image map
  • Highlight on Hover: Highlight different image hotspot areas when your site visitor moves their mouse over the interactive image
  • Customizable Colors: Choose your own custom color scheme for the image map to match your site
  • More Info on Click: When a highlighted area is clicked, show more information. Great to highlight points of interest on your image map
  • Go to a URL: Optionally send a site visitor to another URL when clicking highlightable hotspots on your image map

Design réactif

Interactive image maps resize to fit your theme and the available screen size. Draw Attention works on all devices and adjusts your image to screens of any size. Works great on touch screens, too!

Accessible

Image maps are accessible to everyone who visits your site, regardless of device or capabilities. Your content is accessible to screen readers. All highlightable hotspots can be accessed by keyboard commands. Anyone on any device can use your interactive image map.

SEO Friendly Clickable Annotations

Draw Attention is built with the principles of progressive enhancement in mind, so your content is accessible even to users who have JavaScript disabled and is SEO friendly, too! Draw Attention draws SVG shapes in modern browsers and falls back to a standard image map if JavaScript is disabled.

Easy to Draw Image Maps

Easy to draw the highlightable areas of your image map – and easy to edit the shapes later too! Create the image map right from your WordPress dashboard. Place your interactive image map into any page or post with a simple shortcode, or use our convenient Beaver Builder module or WordPress Editor Block.

New and Improved Drawing Tool

Draw complex shapes or perfect circles and rectangles. Use the new zoom and pan feature to get extra precise drawings of your clickable hotspots. Easily edit the shapes whenever you’d like or start from scratch at the click of a button.

Upgrade to Draw Attention Pro to get more features and customization options:

Create Multiple Interactive Image Maps (Pro only)

Need more than one interactive image map on your site? The Pro version allows unlimited highlightable areas on unlimited interactive images.

Annotation Layout Options (Pro only)

Show more info about highlighted image map areas in a variety of different layouts, including lightbox and tooltip.

20 Pre-Defined Color Palettes (Pro only)

Choose from one of 20 pre-defined color palettes or use your own custom color scheme on the image maps.

What could you make with Draw Attention?

  • Showcase real estate or a new property development. Give your visitors a virtual tour where they can explore floor plans and photos.
  • Sell booths to exhibitors at your trade show or conference by showing them an engaging interactive map of the trade show floor.
  • Make a product tour or tutorial documentation – explain your product by highlighting features in a visual way.
  • Interactive infographic – annotate and call out important areas on your infographic and show more information about those points of interest.
  • If you’re familiar with HTML image maps, we help you make those in a modern way that’s compatible with today’s devices & browsers.
  • Add another dimension to your Blog content by using interactive images to explain concepts or display affiliate links in an engaging way.

2.0.14 – 2023-08-12

Features and Improvements

  • Tested up to WP 6.3

2.0.13 – 2023-06-25

Fixes

  • Fix PHP warning in CMB2 library

Features and Improvements

  • Prevent conflicts with other plugins that use the leaflet library

2.0.12 – 2023-05-26

Features and Improvements

  • Improved nonce verification and capability checks

2.0.11 – 2023-05-12

Fixes

  • Fix Elementor popup duplicating DA images

Features and Improvements

  • Update gutenberg block to use api version 2

2.0.9 – 2023-04-11

Fixes

Features and Improvements

2.0.8 – 2023-03-28

Fixes

Features and Improvements

2.0.7 – 2023-03-28

  • no changes

2.0.6 – 2023-03-28

Fixes

Features and Improvements

2.0.5 – 2023-03-28

Fixes

Features and Improvements

2.0.4

  • Fixed: SVG desc markup

2.0.3

  • Fixed: PHP Warning in import function

For older changelog entries, please see the additional changelog.txt file delivered with the plugin.

Captures d’écran

  • Draw your highlightable areas right in the dashboard
  • Site visitors can click to learn more about your highlighted areas
  • Upload a floor plan and show detail photos for each room
  • Customize the colors and appearance of the highlighted areas
  • Add in unlimited hotspot areas to your interactive image

Blocs

Cette extension fournit 1 bloc.

  • Interactive Image Map Plugin - Draw Attention

Installation

  1. Navigate to the ‘Add New’ in the plugins dashboard
  2. Search for ‘draw attention’
  3. Click ‘Install Now’
  4. Activate the plugin on the Plugin dashboard

Manual Install

  1. Navigate to the ‘Add New’ in the plugins dashboard
  2. Navigate to the ‘Upload’ area
  3. Select draw-attention.zip from your computer
  4. Click ‘Install Now’
  5. Activate the plugin in the Plugin dashboard

After Installation

  1. You’ll see a new Draw Attention menu item on the left sidebar of the WordPress Dashboard
  2. Create your interactive image. We have a guide to walk you through how to create the image.
  3. After your image is created, you can embed it into any page or post with the [drawattention] shortcode.

FAQ

What’s added in Draw Attention Pro?

The Pro version includes:

  • Ability to create more than 1 interactive image
  • Unlimited number of highlightable areas for each image
  • 20 preset color schemes
  • Custom layout options (change position of more info box or use a lightbox or a tooltip)

Where can I find documentation and learn how to use the plugin?

We have tutorials, videos and other helpful information on the Draw Attention website

I have a question or need help with the plugin, how do I contact your support team?

To contact our support team, submit your message through our WordPress support forum. Or, visit our website’s Contact page.

If you’re using our Premium plugin, you can also use the License & Support tab within the Draw Attention Pro plugin settings to send us a direct email.

How do I draw my first image?

We have a guide walkthrough of creating your first image available in our documentation.

Avis

31 août 2023
We have developed several apartment rental modules for various customers with Draw Attention Pro. The plugin has proved particularly effective and stable. It's an inexpensive solution for a floor selector, and a very effective one at that. Support is also very present and eager to help. I really recommend using this plugin, you'll be pleasantly surprised!
20 avril 2023 1 réponse
We couldn't get the WPML translations working because of some configuration settings which I just couldn't find. We messaged support and Cynthia took care of our issues, resolving the problems almost instantly. We couldn't be happier.
20 mars 2023 1 réponse
We had a problem with our Draw Attention plugin. I contacted support and got exceptional assistance from Cynthia. She took careful note of our problem and after very thorough investigation discovered that another plugin (which we did not use or need) was interfering with Draw Attention. We removed the offending plugin and now Draw Attention is working beautifully again. Throughout I was kept up to date with their investigation and received very courteous treatment. I am most impressed with the professionalism of this team.
9 mars 2023 1 réponse
An amazingly easy to use plugin to create a stunning effect. Support is equally as good – response times, explanations and help just superb! Highly recommend the plugin and team!
Lire les 99 avis

Contributeurs/contributrices & développeurs/développeuses

« Interactive Image Map Plugin – Draw Attention » est un logiciel libre. Les personnes suivantes ont contribué à cette extension.

Contributeurs

“Interactive Image Map Plugin – Draw Attention” a été traduit dans 4 locales. Remerciez l’équipe de traduction pour ses contributions.

Traduisez « Interactive Image Map Plugin – Draw Attention » dans votre langue.

Le développement vous intéresse ?

Parcourir le code, consulter le SVN dépôt, ou s’inscrire au journal de développement par RSS.