A WordPress plugin for creating interactive images
Easy drawing tools, fully responsive
Give it a try!
Click or tap the different rooms on the floorplan
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.
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.
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.
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.
Draw Attention works on all devices and adjusts your image to screens of any size. Works great on touch screens, too.
Draw Attention is progressively enhanced and built according to web standards and best practices. The code is high-quality and carefully tested.
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.
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!
What's new in Version 1.8
- Multiple color highlight shapes on a single image
- Ability to always show hotspots
- Import/export functionality - easily move images from one site to another
- Drag and drop to re-order highlightable areas
- Improved highlight area drawing tool
What our awesome customers have to say
I'm so pleased with the ease and functionality of this plugin!
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.
This makes clickable images very easy!
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.
Just what I was looking for. Thanks!
Does what it says without any glitch!
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.
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!
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.
"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!
Great plugin, superb support
I bought pro version after testing the free one. Amazing plugin and super-fast support.
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!
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!
You guys rock….
This is just what I needed. Very nice piece of work.
Simple and easy to set up and use.
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!
Amazingly solid plugin. Works really great!
-- Jon Brown
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.
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.
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
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.