Today, it is hard to run a website without multimedia. Images, videos, and music are a part of practically every website. An average Internet user is heavily dependent on visual stimuli, so you have to take care of the visual and the Interactive parts of your site. Articles with images receive 94% more views than those without one. Also, it's already a known fact that multimedia on websites can boost content marketing ROI.

We hope there's no need in persuading you to take care of images on your site. Even if you don't use images in articles (which you should), you use featured images, right? There are quite many gallery plugins which can help you manage images on your WordPress site, you can have photography related themes, connect Instagram to your WordPress site, and do so much more. But what if you wanted to create more interactive content?

For starters, you might be interested in adding before-after image effect that your users will love. Don't forget about Virtual Reality in WordPress which is getting more popular after Automattic introduced VR to wordpress.com. Still, there's something missing. Is it possible to make Interactive Images with clickable parts? Yes, that's possible, and we're about to show you how fun and easy that is.

Draw Attention

PRICE: Free

DEMO

The first thing about this plugin you'll like is that it is entirely free! Just like with any other plugin from the WordPress repository, you can download, install and activate it in a matter of minutes. The free version will allow you to work with one interactive image. If you want more, you will have to opt in for the PRO version, but we'll talk about that later.

The plugin is responsive, and you don't have to worry about the interactive images being properly displayed on any device. Not just that the image will scale according to the screen size, but it will work in most modern and older browsers (desktop and mobile). Draw Attention uses canvas elements when displayed in new browsers while it will fall back to image maps if you load it in an older one.

Features

Before getting to an example which will show you how powerful this simple plugin is, let's see what to expect from Draw Attention:

• Draw – After you upload an image, you will get a chance to draw shapes on it. Select any part of your image which will become selectable/clickable
• Colors – Customize colors so that you can make hotspots fit with your site design
• Highlight on hover – Show another part of the image if a user hovers over the selected part
• Show more info – Display more information about the selected part of the image
• Go to URL – Redirect users to any URL if they click on the selection

Example – Interactive map of Hawaii

We will use the example from the demo site to show you what exactly you can do with Draw Attention. So, let's see what an interactive map of Hawaii looks like when created with the plugin.

The first thing you would have to do is to find an image of Hawaii islands. After you navigate to Draw Attention -> Edit Image, you should upload the picture to the area on the right sidebar. Once image loads, the fun can begin.

Here you get to choose colors for highlights (color, border, opacity, etc.), style the "more info box" (image, title, text color, etc.). If you don't want to select each and every color for the image manually, you can quickly choose a color scheme from the right sidebar.

The most magical part happens on the Hotspot Areas settings screen. Here you will get your image loaded in full size. All you have to do now is to start drawing and create a new hotspot. You can add as many points as you want which means that you can create as comprehensive selections as you want. You get to create as many hotspots, and each can have its own settings. So, in this example, you should select one of the islands. Choose a title for the island, add a description and the extra image that will show once a user hovers the hotspot (right part of the GIF image shown above).

You should repeat the process for each of the islands you want to be interactive. Once you have your hotspots ready, just copy the shortcode from the right side. Paste the shortcode into a post, page, widget or wherever you want to show your new interactive map, and you're done! If you wanted to redirect users to any other page once they clicked on the selections, you just need to select the URL instead of the description. Easy as that! How do you like the interactive map of Hawaii? Want more control over the maps? See what you can do with Google Maps Widget.

PRO version

While the free version will be perfect if you need just one image, the PRO version will allow you to have as many interactive images on your site as you want. Although this will be the most important thing to consider, the PRO version will get you even more than multiple images.

Layout Options feature will let you show more information about selected parts of the picture. For example, you'll get to show info in a lightbox or in a simple toolbar which will pop up after a user hovers over the selected part of the image.

There are also twenty predefined color pallets, so you don't have to customize each and every color manually. The PRO version will cost you $74 for a single site license, but if you need more than one interactive image, this will be a no-brainer.

In the end, we invite you to take a look at two real-life examples of the plugin in action. See the interactive image of a building in construction, and the other one where you can see a plan of several smaller buildings.

The post How to create interactive images – draw, add descriptions and links appeared first on WP Loop.