A WordPress plugin for creating interactive images

Easy drawing tools, fully responsive

One bedroom floor plan
Kitchen Bathroom Den Entryway Bedroom Living room

Kitchen

Photo by Aaron Huber on Unsplash

Bathroom

Photo by Aaron Huber on Unsplash

Den

Photo by Jacalyn Beales on Unsplash

Entryway

Photo by Douglas Sheppard on Unsplash

Bedroom

Photo by Felipe P. Lima Rizo on Unsplash

Living room

Photo by Nick Karvounis on Unsplash

Give it a try!

Click or tap the different rooms on the floorplan

arrow

Highlight different areas of an image and attach more information to each area. Add an image, text, headline, shortcode, gallery, video, audio and more. Reveal more information on click/tap or hover. Select from a pre-built color scheme or specify your own custom colors. Interactive images are fully resposive, SEO friendly and accessible.

Features

Easy drawing tools

Click to draw

Our drawing tools are easy to use, even to draw complex shapes. Just click your image to draw a point. Remove a point by pressing the control key while clicking. Easily adjust an existing point by simply dragging it with your mouse. You can easily add new points to an existing shape just by clicking. Move the entire shape by grabbing the handle in the middle. You can draw shapes on images of any format - PNG, JPG, or GIF.

Create colorful highlights

Draw attention to areas of your image

Draw any shape from simple squares and triangles to complex shapes and place them anywhere on your image. The shapes you draw highlight as your user moves their mouse over the image or taps the area on a mobile device. You can define the color and opacity of the shapes and control their style - make the shapes visible at all times, or only reveal them after the user interacts with your image.

Customizable colors

Match your theme or color palette

Choose from over 20 pre-defined color schemes to quickly and easily create an interactive image. Or, create a complete custom color scheme that matches your theme or your image. You can use multiple color schemes on a single image - great for showing different statuses or categories. Create your own styles including color, opacity, border color, border width, and border opacity.

Layout options

Choose how you'd like your image to display

Define how you'd like additional information attached to your image should appear. It can appear beside the image, on either the left or right, above or below the image, or in a lightbox or tooltip. You can define the styles for the background color and text color of the additional information. Fonts and font sizes are inherited from your theme for maximum compatibility.

Add additional information

Add more to each highlightable shape

Add a title and a featured image attached to each highlightable shape on your image. You can also add styled text with the full-featured text editor. In addition, the text editor allows the use of shortcodes, including video, audio, and image galleries. You have lots of flexibility!

Link to other pages

Add links to highlightable shapes

As an option, instead of adding more information to each shape, you can optionally link each shape to another page, post, product, or more. You can link to other websites and choose to open the link in a new window or in the same window. You can also link to documents, forms, photos, and downloadable files.

More Features

Responsive

Draw Attention works on all devices and adjusts your image to screens of any size. Works great on touch screens, too.

Quality

Draw Attention is progressively enhanced and built according to web standards and best practices. The code is high-quality and carefully tested.

Accessible

Your content is accessible to screen readers. All highlightable areas can be accessed by keyboard commands. Anyone on any device can use your interactive image.

Use Anywhere

Place your image into any page or post with a simple shortcode, or use our convenient Beaver Builder module. Easy to display wherever you'd like!

Always Improving

What's new in Version 1.8

  • Multiple color highlight shapes on a single image
  • Ability to always show hotspots
  • Refactored and more performant JavaScript
  • Import/export functionality - easily move images from one site to another
  • Drag and drop to re-order highlightable areas
  • Improved highlight area drawing tool

Testimonals

What our awesome customers have to say

Awesome!

I'm so pleased with the ease and functionality of this plugin!

-- bernadettetp

Super fast support and helpful

Wow, what great support I received! I installed the free version after searching for a plugin that would work for me. This one did just fine except the clickable areas on a phone were offset which meant I wasn’t able to publish it until it was fixed. Natalie was very quick and got it working within a couple of business days (problem was with Jetpack). Thank you so much for your efforts and top notch support even for a free user.

-- iguanamom

Very nice

This makes clickable images very easy!

-- johncoleman83

Wow! Easy to Use and Works wonders

After playing around quite a bit with Shapes, area maps, and canvas I had a heck of a time getting exactly what I wanted. This product solved all of my problems. This is a lot of cool functionality on one great plugin.

-- moonshdw8

Simply brilliant

Just what I was looking for. Thanks!

-- Rabenmaul

Awesome!

Does what it says without any glitch!

-- cherakz

Great Plugin and Great Customer Service!

I having been using the pro version of this plugin after testing on the free version and must say it has been a great tool to have in my WordPress kit! Being able to create customized clickable hotspots on images with an nice array of design and functionality options has proved very useful in many scenarios. On top of that, the customer support has been fantastic; they were very responsive and helped me worked through some complicated issues I was having with my install until it was resolved.

-- bgcdml

Easy to use, great results!

For a long time already the Draw Attention plugin has been sitting in my Favorites folder and now finally I can use it on a website!

It is very user friendly and it is quite easy to draw the clickable areas on the image.

Thanks for developing this plugin!

-- Pieter

Great Plugin – Easy to use!

Very cool, love it so far! Had some trouble at first with conflicting java script, but upgrading my theme manually fixed the issue and Draw Attention answered my question very quickly.

-- spucino

"Six" stars for this one… made my day!

This free plugin is a life-saver! I had wasted a bunch of time setting up some html image mapping on my own, only to have my hopes dashed when I realized that my code would not be responsive on various screen sizes. [Sigh…] But then I was elated to find this plugin, and it is super easy to use and the results are fully responsive all the way down to my cellphone. Thank you SO much for creating this, it is exactly what was needed!!!

After a long search I found it! Great plugin, great customer service!

Searched, found and tried a few other plugins I wasn’t happy with at all.
Finally found DrawAttention, this one rocks!

Customer service: very quick and helpfull.
I Wanted it to link to anchors on my single page website.
This did not work at first, but thanks to the quick action from customer support, it now does!

Compliments from the Netherlands!

-- HB101

Great plugin, superb support

I bought pro version after testing the free one. Amazing plugin and super-fast support.

-- Pavle123

Really enjoying seeing this plugin progress

This plugin is like a fine wine… it just keeps getting better with age. Why? Because the development keeps iterating. Fixing bugs, adding features, fine-tuning, and making it the go to solution for image hot spots and more.

-- Devin Walker

This plugin is FANTASTIC!

I have tried all kinds of complicated ways of adding hotspots, highlight colour and links to a map of ours. I found this plugin by chance and it does all of the above with no fuss. Looks great and works great. Recommended!

-- pete119

Awesome and easy to use plug-in!

This is exactly what I’ve been looking for. Lets you draw hotspot areas, add a URL or a description. Hotspots are also editable once they’re drawed. Just amazing!

-- Pascalvd

You guys rock….

This is just what I needed. Very nice piece of work.
Simple and easy to set up and use.

-- paceway

Just What I have been looking for!

So pleased to finally find a responsive image mapping plugin. This solve my mobile problem. Easy to use. Great Support and more features to come! Thanks!

-- karenratte

Really Good

Amazingly solid plugin. Works really great!

-- Jon Brown

Brilliant!

A super bit of software. So much better than html “usemap” methods that are so time consuming. I use it for hotspots on graveyard and orchard plans.

-- kevjon

Unique plugin with great support

This plugin elegantly solves a problem for me and my client – interactive floor plans!

I had a minor bug while installing the plugin so I reported it in the support forum. I got a response within ten minutes linking to a new and updated version of the plugin.

Thanks guys!

-- stentotre

Annotation made easy

Nice piece of work.
Easy to use solution for annotating images.

-- Kyle M Brown

Great plugin Doing Unimagination

I never thougth a plugin like this can do so much great work. The plugin is useful for those in Housing/Estate Management.

You can have a Ground plan of a structure and take pictures and Draw the focus attention that attache image to that focus

-- goodmuyis

Feature tours just got way more awesome.

Need to make a feature tour? Just take a screenshot of your app, then use this plugin to give the user an interactive walkthrough of each element in the screenshot.

-- Soflyy 

Pricing

Unlimited
$124
Unlimited Interactive Images
Unlimited Clickable Areas
20 Color Schemes
1 Year of Updates and Priority Support
 
Single
$74
1 Website
Unlimited Interactive Images
Unlimited Clickable Areas
20 Color Schemes
1 Year of Updates and Support