How to Add Interactive Images to Your Lesson Content

LifterLMS Masterclass Series with Nathan Tyler

BONUS #1 20% off if you purchase Draw Attention within 72hrs from the live webinar with coupon code: LIFTERLMS.

BONUS #2 Make something fun and interactive with Draw Attention for your online course. Email Draw Attention a link to check it out, and if they include it in their customer showcase, they’ll double the length of your license. So you’ll get an extra year of support & updates for free.

---

How To Add Interactive Images To Your Online Course

This LifterLMS Master Class webinar with Nathan Tyler of Draw Attention shows how to turn a static lesson image into clickable, interactive content. Learn how to draw custom hotspots on any image, add text, video, or audio inside each pop-up, and use interactive images in lessons, quizzes, and sales pages to boost engagement instead of leaving students to passively watch and scroll.

What You’ll Learn

• How the Draw Attention plugin turns a single image into a clickable, teachable map
• How to draw custom-shaped hotspots and choose between popup, lightbox, tooltip, and hover display styles
• How to embed video, audio, and shortcodes inside a hotspot pop-up
• How interactive images affect page performance and SEO
• How to use interactive images for non-linear, self-selected lesson paths

Key Takeaways

• Replace a plain course roadmap graphic with an interactive image that lets students click each phase for more detail
• Use a hotspot pop-up to add a short audio clip, quick video, or lead capture form without slowing down the page
• Title and tag your images with real keywords instead of a default filename to add SEO value
• Cross-link two or more interactive images to build a self-select, non-linear path through dense lesson content
• Compress source images before uploading, since the plugin itself is lightweight but a heavy image is not

Frequently Asked Questions

Full Webinar Transcript

Why Interactive Images Solve The Passive Course Content Problem

Chris Badgett: Today we are shifting hats. In the last two classes in this series we had our technology hat on and our entrepreneur hat on. Today we have our instructional design hat on, our teaching hat, and we are looking at how to create interactive image content.

One of the problems in our industry as online educators is that a lot of courses and memberships tend toward what I call edutainment. Someone joins a course excited, gets into a lesson, presses play, and sits back. It is educational, but it is passive. We want our learners taking action, interacting with the content, and taking it out into the real world.

So I want you to put your instructional design hat on and think about how you could make your lesson content more engaging. Think outside the video, outside the audio, outside the lesson worksheet or download. One of the things that does not get used as much as it could is images, and especially interactive images. Visual learning is a big part of how people learn. I am personally a visual learner myself, so I am drawn to videos and images more than text.

People come to building online courses from a lot of different angles. Maybe you are coming from a teacher background in the classroom. Maybe you are coming from the WordPress industry and discovering everything a post type can do, like lessons and courses and now interactive content. Maybe you are coming from the e-learning industry and you have used authoring tools like Adobe Captivate or Storyline.

It is amazing how far the blog post has evolved to do all these different things, especially in a teaching context. But there has always been a content problem. We can do a lot with these post types. We can embed videos, we can do text, images, and downloads. But making it feel game-like and interactive is where there is a lot of room for innovation. Nathan Tyler has a tool called Draw Attention that we are going to demo today.

What The Draw Attention Plugin Does And How It Displays Information

Nathan Tyler: Let’s first take a look at what a Draw Attention image looks like on a page. You have highlightable areas, and you can click on any of them for more information. You can put photos in there, shortcodes, more text, or other information.

You create these highlightable areas by clicking a series of points. You can draw simple rectangles very quickly, or you can draw lots of little points and make very complex areas. You get the opportunity to customize the color of each area separately, and you can control the opacity and the thickness.

There is also a lot of visual control over how the extra information displays. You can show it on the left, show it on the right, show it as a small pop-up, or show it in a light box that overlays the page. Presentation depends on the content. If you have a lot of information to present, a pop-up or light box works well. If it is just a few short paragraphs or a link, the left or right layout works well.

There are also a couple of different actions you can attach to a hotspot. You can link straight to an external URL, so a click opens a new tab and takes the visitor to a Wikipedia page or another resource. If you do not want to show more information in a pop-up at all, you can use it as an old-school image map that just links out.

How Interactive Images Work On Every Device

Nathan Tyler: Draw Attention images are fully responsive, so they work on a mobile phone. On mobile you obviously cannot hover over something to see it highlighted, since there is no cursor, but the hotspot lights up the moment you tap it. There is also an option to have every hotspot on an image show as highlighted by default, which is helpful if the image is not obviously interactive and you want visitors to know right away that they can click around, especially on mobile.

Everything scales down and repositions. If you choose a left or right layout, the extra information moves below the image on a small screen instead of staying beside it, and the pop-up tool tips reposition so they stay visible. People are learning across a lot of different devices, so any interactive content you build works on all of them.

Real Examples Of Interactive Images From Online Course Sales Pages

Nathan Tyler: We have a customer showcase on our site, plus some demos of our own. A lot of the ideas are not learning examples specifically, real estate floor plans and similar things, but the concepts apply to any use case. Using an interactive image for infographics and basic information is a great way to expose data to a visitor without overwhelming them. You can put a lot of data behind a hotspot and still keep the image looking clean and simple.

Some people use it to link between pages and lessons, or on a sales page to educate visitors about the different phases of a course. It can also live inside the course itself, including inside a quiz question. Anything you build with Draw Attention gets a shortcode, so you can put it in a quiz question, a lesson, or your marketing pages.

Chris Badgett: The obvious use case is your lesson content. If you are teaching about the human body, geography, or some kind of process, an infographic is a natural fit. But a lot of course sales pages describe the course in phases, or what LifterLMS calls sections. You can write great sales copy about your three phases or your twelve steps, but if you can also show people a visual road map of those phases, that gives them something a lot more appealing to the eye.

It takes complex information and makes it rapidly understandable, especially on a sales page where you care about attention span. You can lay out your value proposition visually. And in a quiz, a picture can tell an entire story that the question then asks the student to do something with.

Nathan Tyler: We have customers who are pretty data-driven, and they see the engagement on these pieces is really high. Even on a sales page where people normally spend around thirty seconds, people click around for an extra thirty seconds just playing with the elements.

How To Add Image Galleries, Video, And Audio Inside A Hotspot

Nathan Tyler: By default, a hotspot has an image area. When you click on it, it can show a photo, but that same HTML area also supports any shortcode. You can put an image gallery in there, embed a YouTube video, or add an audio file. A lot of great information can live inside that extra info area.

Draw Attention itself generates a shortcode, which you can place anywhere: in a course, a lesson, or on any WordPress page or site. It does not have to live inside a course. You can put it on a sales page or promotional material, and then whatever you put in the more-info area, whether that is a shortcode or plain HTML content, comes along with it.

Chris Badgett: For example, with LifterLMS you could build a wheel with a slice for each category of course on your site. A visitor clicks a slice, and the pop-up shows the courses relevant to that category. It is a much more visual, interactive way of helping people find what they are looking for.

Creative Ways Course Creators Are Using Interactive Images

Chris Badgett: I love the picture showing a bag with items in it, like school supplies. If I had a fitness course, I could show a yoga mat, a jump rope, and a kettlebell, and label what each item is. It is a lot cooler than a plain shopping list.

Nathan Tyler: It could be your getting-started checklist. This is your go-bag for being the expert in this field, and that is a much more engaging way to present it than a bulleted list of things to buy.

Chris Badgett: If you had a CPR course, you could do the same thing with everything in a first aid bag.

Nathan Tyler: We also have a lot of bloggers and people in fashion who will highlight a hat or an outfit so visitors can see where to buy it, often with affiliate links. There are a lot of use cases for it, and most of these are just on standard WordPress pages, not courses at all.

Where Else You Can Use Interactive Images Besides Your Course

Chris Badgett: Just to answer a question from the chat, you can use this anywhere. It is not limited to courses. You could use it on a blog post for something completely unrelated to the education side of your business.

Nathan Tyler: Yes, a lot of people put it on standard WordPress pages. We have some really cool floor plan examples, including a full condo complex where visitors can see a level, download a PDF, and use it like an interactive campus map or directory. You can also customize the colors to indicate whether something is sold or available.

We have a customer in Vietnam who rents out houseboats and uses Draw Attention for visual tours of each one, showing which are available. A lot of people cross-link multiple images together, so one real estate project might use a whole separate interactive image for each level, which creates layers of content. It can look very simple on the surface but have a lot of depth underneath.

Building Non-Linear, Branching Lessons With Cross-Linked Images

Chris Badgett: In the learning space we sometimes talk about non-linear courses, where there is a kind of branching that happens. If you had a large course, you could use a tool like this to let a learner self-select based on what they are interested in, or the type of business or person they are, and point them to a different lesson based on what they click. That adds a layer of personalization and non-linear learning.

A similar question came up later about doing a zoom-in effect, like starting on an image of the earth, then zooming into a country, then a town, then a house.

Nathan Tyler: There is not a way to do that dynamically and fluidly on one screen, but a lot of our users cross-link multiple images to get the same effect. For a real estate project, the first screen might be an overall map of the whole project, and clicking an area or a village takes you to another page with its own interactive image. We have not found a more clever way to do that reliably on a phone, since there is so much less space and fewer gestures available once you are on mobile.

Chris Badgett: That gets back to the branching idea. If you had a picture of space and the solar system, you could click on Earth, then click a continent, then jump to a separate interactive image to keep zooming in on whatever you want.

How To Draw A Highlightable Hotspot On Your Image

Chris Badgett: Anthony asked how you create a hotspot. Do you draw it within the plugin?

Nathan Tyler: Yes, you basically draw a series of dots to create the outline, so it does not have to be a square or a circle. It can be whatever shape you want. When you are editing an image, you get an area where you can draw each of these spaces. You give the area a title, choose whether it should show more information or link straight to a URL, and you can go back and correct it afterward. You can remove a spot, re-drag the points, or drag the whole shape around. You are not locked in. You can always come back and perfect it later.

In a live example, Nathan added a new hotspot by clicking the add-area button, then drawing a set of points around an object on the image. Once the shape was drawn, he switched on the option to highlight every hotspot on the image by default, so visitors can see at a glance which parts of the image are interactive.

Setting The Title, Action, And Style For Each Hotspot

Nathan Tyler: Every hotspot has a title, an action, which is either showing more information or linking straight off to a URL, and a style you can assign to group similar hotspots together. You upload the image for the hotspot, and the description box underneath is just a standard WordPress editor, so you can put any shortcode, video, or other content into it.

Chris Badgett: Could I put a Gravity Forms shortcode in there?

Nathan Tyler: Yes. You will want to make sure it is set up as an Ajax form so it does not get confused inside that small space, and you probably want to keep it to something like an email collection rather than a full multi-page form. Technically it could run, but a fifty-field form is not going to look great in that small area.

Choosing Between Right, Bottom, Popup, Lightbox, And Hover Display Layouts

Nathan Tyler: Here we have an image for a basic drinks lesson, set to a right-hand layout, so clicking an item shows the extra information beside the image. We can move that to the bottom instead of the right side. It is not always a perfect fit. It depends on the content, so it is worth experimenting with each image.

If you have a lot of information, the light box and tool tip options are better fits, because they give you more room. With a light box, your main image runs the full width of the page, and the extra information pops up on top of it instead of squeezing in beside it. All of this is bundled into the plugin. There is no need for a separate light box plugin.

The tool tip is quicker if you have a lot of objects you want to scan between, since the light box requires you to dismiss it and reset before opening the next one. You can also switch to a hover mode, where hotspots highlight and their pop-up follows your mouse without clicking at all.

Why Hover Mode Can Feel Jumpy On Dense Images And Mobile

Nathan Tyler: The trouble with hover is that if you want the visitor to click something inside that more-info box, like a button that says click for more info or click here to play the video, they can never get their mouse inside it, because the box keeps moving with the cursor. On mobile, hover does not exist at all, so it just converts to a tap.

Hover can also feel jumpy on a dense image, like a trade show floor plan with a lot of booths right next to each other, because there is not much white space between hotspots. In general I prefer click, but it depends on the use case. If it is a simple exploration or fun kind of image, like this one, hover is a nice fit.

Why Draw Attention Is Lightweight And SEO Friendly By Design

Nathan Tyler: A common question is whether this is a heavy plugin, and it is not. This is just one image sitting in your media library. We use HTML5 canvas, which is a lightweight tool. It is not loading a big heavy image for the hotspots, just coordinates. We store the points you draw and then lay them over the image, scaled to fit the device.

All of the more-info content is also loaded on the page, which matters for search engines. That content is stored as real heading tags and paragraph text, so it gets indexed the same as any other content on the page, even though it is visually hidden until someone clicks.

How To Customize Hotspot Colors And Create Multiple Highlight Styles

Nathan Tyler: Every hotspot color is fully customizable. You can change the highlight color, the opacity, and even the border thickness, from a thick border for emphasis down to something thin or invisible. Down in the styling section, there is a button for showing all hotspots by default, and you get one color for the default state and a second color for when a visitor is hovering.

You can also create multiple highlight styles. In this example, two styles were used, one for drinks served with a cherry and one for drinks served without, colored accordingly, red for the cherry group. Setting each individual color can lead to some rough combinations, so the plugin also includes about a dozen preset color themes that already look good together, and you can tweak from there.

How To Embed A Gravity Form Or YouTube Video Inside A Hotspot

Nathan Tyler: The description box for each hotspot is a standard WordPress editor, so any short code or video goes right in. For a quick example, here is a YouTube video added using WordPress’s embed shortcode to drop it in line.

Chris Badgett: What does the embed shortcode do differently than just pasting the link?

Nathan Tyler: I do not think there is a difference in this case, but the embed shortcode lets you pass extra parameters, like a specific width, height, or autoplay.

After the video, a link off to a Wikipedia page with more information was added, so the hotspot carried both a video and a link to learn more. Because that hotspot now held more content, its display was switched back to a light box layout, which gave the video more room to show.

Can You Play Audio Or Sound Effects Inside A Hotspot

Nathan Tyler: You can use any shortcode, so audio should work through whatever embed shortcode or audio player plugin you use. It can get a little tricky, because in most browsers, closing that pop-up stops any audio that was playing inside it. You would not want to put an hour-long podcast in there, but a short clip, something in the range of a forty-second audio file, is totally appropriate.

Chris Badgett: That could work well for a testimonial. Instead of just a written quote from a customer, you could click their photo and hear a short spoken version of it.

How Draw Attention Modernizes The Old-School Image Map

Nathan Tyler: Back in the nineties, an image map worked almost exactly the same way. You would upload one big image in a tool like Adobe GoLive, draw little boxes around the coordinates for each menu item, and click on them to navigate. Image maps are still supported by browsers, but they fell out of style because they do not scale or respond well.

Draw Attention is a modern take on that same idea. Everything is drawn in HTML5 canvas, so it is fully responsive, and it can be applied anywhere on your site, not just inside a course.

Does Jumping Between Interactive Images Break Certificate Completion In LifterLMS

Chris Badgett: Graham asked a good question. If you are issuing certificates in LifterLMS, does non-linear jumping between pages mess up certificate completion?

LifterLMS itself is already non-linear in that people can jump around, though it is not adaptive branching where the course itself changes. I recently talked with Chris Davis, the director of education at ActiveCampaign, on my podcast, LMScast, about how sometimes online training focuses too much on completion when it should focus more on the journey. Not every student needs everything in your course. If your first lesson has a diagnostic interactive image, where a student clicks the part they are struggling with, whether that is marketing or coming up with a product idea, it can send them straight to the lesson that helps most.

That said, if you are issuing a certificate that requires one hundred percent of the lessons to be completed, a student who jumps ahead using a hotspot would still need to circle back and complete every lesson. The interactive image makes it easier and more appealing to find the right lesson. It does not change what LifterLMS requires for the certificate itself.

How Large These Files Are And Whether They Slow Down Your Site

Nathan Tyler: The weight really comes down to whatever source image you upload. We do not modify it. All of the hotspot data, the canvas coordinates and color information, is really just text to the browser, usually only a couple of kilobytes. If you are using the light box or tool tip layout, that adds maybe ten or twenty more kilobytes for the script. Ninety percent or more of the performance weight on your page is going to be the content you choose to put inside the hotspots, not the tool itself.

Chris Badgett: Whenever you add an image to your site, making the file size smaller matters. On a Mac you can export a photo at medium quality from Photos and it will look identical online while being a lot smaller. There is also a plugin called Imsanity that automatically resizes any large upload. You set a maximum pixel dimension, and anything you upload to the media library gets resized and compressed automatically, so you only have to set it up once.

The page also does not wait on all of the hidden hotspot content to load. Modern browsers recognize that a hidden div is not displaying on screen, so they defer loading that image until it is actually needed, which keeps the rest of the page fast.

How To Title And Tag Your Images For Better SEO

Chris Badgett: One of my main SEO habits, even though I am not a hardcore SEO person, is taking the time to title my images with the relevant keywords instead of leaving them as something like img01573.jpg, which tells Google nothing. Images do contribute to SEO value, so it is worth the extra effort, as long as you keep it honest. The image needs to actually contain what the keywords describe.

Nathan Tyler: The file name and the alt text both matter, and if you are using Draw Attention, you get even more of that SEO value, because the image sits right next to a title and a description you have written. Just make sure you are not repeating the same keyword over and over. That kind of stuffing does not help. It is more important that the content around the image is genuinely relevant and informative than exactly what you name the file.

Chris Badgett: I am also not scared of outbound links. If a hotspot sends someone to a Wikipedia article for more information, that is a good thing to have in your description.

Nathan Tyler: Alt text is really built for screen readers, so people using accessibility tools or a slow connection can still understand what an image is. There is some SEO value in it too, since Google looks at it, but Google also knows people sometimes stuff alt text for SEO, so do not lose sleep over it. It just should not hurt to put something descriptive in there.

Creating Reusable Branded Color Palettes You Can Export And Import

Chris Badgett: Are the images that show up in your customer showcase included with Draw Attention, so people have something to start with?

Nathan Tyler: We do not ship any default images, but you are welcome to use any of the images on our site, and we have an export feature that lets you move all of the coordinates and styling between sites, so you do not have to redraw everything from scratch. Every use case is different enough that we have not found one set of demo content that would be useful for the average user, but the preset color palettes are genuinely helpful. When we first built this, everything looked like it was straight out of Geocities, all clashing colors. Having those color packs gives you a place to start, and you can tweak from there.

A later question asked whether you can build your own branded color palette and reuse it across images.

There is not a drag-and-drop style builder in the interface yet, but you can duplicate an existing image, or export it and import it into another site, and it will carry the same styling with it. It is not as elegant as a dropdown of saved styles, but you do not have to re-enter every color and style each time.

Where To Find Free Stock Images For Your Course

Chris Badgett: For anyone looking for images with the right license for commercial reuse, a site I use is called Libre Stock. You always want to respect the original author’s rights, so you cannot just take any image off the internet, but a site like that is a good place to find content you can actually use.

Creative Ideas For Teaching Music And Language With Audio Hotspots

Chris Badgett: Kev shared an idea about teaching music, especially for kids. Imagine sheet music where a student can click on different notes and hear the sound of that note. His question was whether that would load effectively or bog things down.

Nathan Tyler: I think it would be fine, especially since each sound is short, maybe one or two seconds.

Chris Badgett: That is a great idea, and it applies to language learning too. If you are teaching a single word, that is also a very short audio file. People often think of audio as a full podcast episode or an hour of class recording, but there is a lot of value in that kind of micro audio.