Draw Attention

Description

Responsive Design

Interactive images resize to fit your theme and the available screen size

Accessible

Image info is accessible to everyone who visits your site, regardless of device or capabilities.

Progressively Enhanced

Your content is accessible even to users who have JavaScript disabled – SEO friendly too! Draw Attention uses canvas elements in modern browsers, and falls back to image maps in older browsers.

Customizable Colors

Choose your own custom color scheme to match your site

Highlight on Hover

Highlight different areas of your image when your site visitor moves their mouse over the interactive image

Easy to Draw

Easy to draw the highlightable areas of your image – and easy to edit the shapes later too!

More Info on Click

When a highlighted area is clicked, show more information.

Go to a URL

Optionally send a site visitor to another URL when clicking a highlightable area of the image map.

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

Have Multiple Interactive Images (Pro only)

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

Layout Options (Pro only)

Show more info about highlighted 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

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 tradeshow/conference by showing them a map of the trade show floor
  • Make a product tour or great help documentation – explain your product by highlighting features in a visual way
  • Interactive infographic – callout important areas on your infographic and show more information
  • 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

Screenshots

  • Draw your highlightable areas right in the dasbhoard
  • 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

Installation

Using The WordPress Dashboard

  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

Uploading in WordPress Dashboard

  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

FAQ

Installation Instructions

Using The WordPress Dashboard

  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

Uploading in WordPress Dashboard

  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
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)

Reviews

Algún problema pero bastante bien.

Muy sencillo e intuitivo, funciona bastante bien aunque he tenido problemas de compatibilidad con los plugins contact form 7 y cookie law info. De todas formas echo en falta que cada punto añadido deje un icono o algún tipo de señal para que el usuario se oriente. Se puede dejar que se dibuje un sombreado pero me parece que queda poco bien. Por lo demás es un plugin muy completo. 4/5.

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.

Simply brilliant

Just what I was looking for. Thanks!
Only I wish the pro version would be a little less expensive.

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.

Read all 26 reviews

Contributors & Developers

“Draw Attention” is open source software. The following people have contributed to this plugin.

Contributors

Translate “Draw Attention” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

1.6.12

  • Improved: Mobile scrolling over active hotspots

1.6.11

  • Improved: Moved wpautop() on description text to a filter ‘da_description’

1.6.10

  • Fixed: Conflict with Ninja Forms that prevented users from being able to use the Ninja Forms WYSIWYG editor (Thanks Ninja Forms team!)
  • Fixed: Handle error when ‘Go to URL’ is selected but no URL is entered
  • Fixed: Undefined index error

1.6.9

  • Improved: Support for WP 4.8.x

1.6.8

  • Fixed: Strict PHP Notice when saving
  • Fixed: Missing detail images on some server environments

1.6.7

  • Fixed: Edge case with missing detail image ID

1.6.6

  • New: Added troubleshooting note for admins when there’s a theme or plugin conflict
  • New: Improved compatibility for site migrations

1.6.5

  • Fixed: Make canvas for drawing hotspots fill the available width

1.6.4

  • Fixed: Conflict with Unveil Lazy Load plugin
  • Fixed: Compatibility with popup blocking in Mobile Safari (iOS 9+)

1.6.2

  • Added: Support for interactive images to work within jQuery UI tabs
  • Improved: Window resizing and redrawing of image hotspots
  • Fixed: Safari bug when navigating back to an image with a clickable area using the URL action

1.6.1

  • Added: Support for placing Draw Attention inside Divi theme Tabs & Toggles
  • Added: Support for Visual Composer AJAX Page Transitions
  • Added: Filter to load Draw Attention scripts early & everywhere (for themes using ajax page transitions)
  • Fixed: PHP (strict mode) warning when post_type is unset

1.5.3

  • Fixed: Conflict between post ID and hotspot ID caused image to disappear when clicking hotspot

1.5.2

  • Fixed: Incompatibility with 3rd party theme/plugin javascript in the admin
  • Fixed: Scrolling issue with deep-linked hotspots on tall vertical images

1.5.1

  • Fixed: PHP warnings when WP_DEBUG was on
  • Fixed: Scrolling issue with deep-linked hotspots

1.5

  • New: Customize background color (behind image) with new color picker added to interface
  • New: Link directly to a hotspot (right-click and copy link) – area will be highlighted automatically

1.4.5

  • Fixed: Mobile/Touch events required 4 taps for areas with URL action

1.4.4

  • Fixed: “the_content” always displaying in the default more info area

1.4.3

  • Fixed: Loading more info in IE9 and IE10. Note that these browsers do not support the area highlights
  • Fixed: Clicking off a selected area will display the default placeholder text in the more info area

1.4.2

  • Fixed: Allow shortcodes in more info area, without using the_content which caused some conflicts with other plugins (ie. showing sharing buttons)

1.4.1

  • New: Ability to link an area to a URL (instead of showing more info)
  • New: Added Visual/WYSIWYG editor to area descriptions (more info box)
  • Improved: Usability on mobile phones and touch devices
  • Improved: Portuguese translation
  • Fixed: Preview not working in some cases
  • Fixed: Compatibility issue with Jetpack Photon

1.3

  • New: Easily preview your interactive image using “Preview Changes” or “View Post” in the dashboard
  • Improved: Better handling of mobile device changing orientation after interactive image is loaded
  • Fixed: Interactive features not working in older versions of Internet Explorer

1.2

  • New: Improve internationalization
  • New: Add Portuguese translation
  • Improved: Optimize detail image size (don’t load full size image for more info box)
  • Improved: Handle JS conflicts with other plugins better
  • Improved: Add warning message for old servers running PHP 5.2 (Draw Attention requires PHP 5.3+)
  • Improved: Better handling of window resizing after interactive image is loaded
  • Fixed: More info content not updating in some situations
  • Fixed: Conflict with some themes causing highlighted areas to “jump” when clicked

1.1.3

  • Fixed: Default color scheme always applying when re-editing an existing image

1.1.2

  • Fixed: PHP Warnings when PHP is in Strict Standards mode

1.1.1

  • New: Add ability “click off” highlighted areas
  • New: Add confirmation alert before deleting highlightable area in the dashboard
  • New: CPT icon in dashboard
  • New: Set a default color scheme when activating Draw Attention
  • Fixed: default layout to show More Info on Left rather than on top
  • Fixed: PHP Warnings visible with WP_Debug
  • Fixed: issues with selected highlight color not always displaying properly

1.0.2

  • Fixed: issue with saving data

1.0

  • Initial Release