Creating interactive image maps in WordPress

Last year, I created a website for a client to showcase their new building. We wanted to make it easy for site visitors to explore the new areas of the new building while also making it easy for the client to update the building information.

The only materials available to us were the architect’s plans and renderings for the new building. We created an interactive floor plan where site visitors can click on different areas of the building to get more information.

A bit later on, I was doing another project for the same client, and we found a place where wanted similar functionality available. I also got a few inquiries from potential clients wanting a similar functionality for their own websites and that’s when the lightbulb finally went on – this needed to be a WordPress plugin. But it was a little more than I could handle myself, so I teamed up with Nathan Tyler of Tyler Digital.

We set aside four hours each week and got together to work on it – 4 months later, we announced the very first release of Draw Attention. And we’ve been working on it since then to add new features and keep things all up to date. Now it’s easy for anyone to create interactive image maps. Here’s an example of how it works:

Designer’s Desk

Designer’s Desk

Click on the items on the desk to learn more.

Computer Tablet Phone Glasses Keyboard Mouse Graphics Tablet Small notebook Journal Mechanical Pencil

Computer

Designers need a computer to do their work well. One with a big and gorgeous screen is preferable.

Tablet

A tablet is helpful for taking notes, taking photos of great design, or sketching up design ideas on the go.

Phone

Great for keeping up with all those Instagram, Vine, and Periscope happenings.

Glasses

Need to be able to pick out tiny issues with a design and set up crisp and gorgeous typography.

Keyboard

Helpful for typing out tweets and answering emails.

Mouse

Best tool around for pushing pixels around a screen.

Graphics Tablet

For those times when fine-grained control over a design is necessary.

Small notebook

Great for slipping into a pocket when going out for an inspiration walk

Journal

For drawing sketches and detailing plans for world domination.

Mechanical Pencil

Best for getting sharp, thin lines in sketches.

These images are super easy to create and don’t require you to know any code. It’s easy to click to draw the highlightable areas of the image, and those can link to an external URL rather than loading up the more info box on the right.

In the Pro version of the plugin, you have a variety of layout options including tooltip and lightbox. The image is responsive, too!┬áThe Draw Attention area will automatically adjust to fit your theme and your site visitor’s screen. You can learn more about it, see some other demos, and watch a video over at wpdrawattention.com. We’re super excited about all the ways people have been using it and hope that you find some clever ways to put it to work for you, too.

5 thoughts on “Creating interactive image maps in WordPress

  1. Awesome. I am doing a website for a home builder and they have a bunch of lots and want people to click on a lot and get all the details for the lot. Excellent!!

  2. This is an amazing looking plugin. I am not sure that I can afford $75 for a one site license for my small education website though. I am however looking forward to testing it on a website or two. I am already planning out an image map graphic for my new project.

Leave a Reply