The power of Hotspot images
Bart Buckinx —
“A picture is worth a thousand words” is a well known English idiom. It refers to the notion that a complex idea can be explained with just a single image, and that this is more effective than a description.
But an image is still flat. Displaying pictures on a tablet opens up other possibilities. You can pinch-to-zoom and explore an image in more detail. To really bring images to live, we need to make them clickable. One way of doing this is adding hotspots to the image.
Hotspots are point or areas in the picture that pop up a window when clicked. The popup can contain text, and can be made really interactive with sound, images, videos, a website or a combination of all of these.
In this post, I will give you some inspiration on how interactive images can be used. The tool used for the examples is the HotSpot image widget from BookWidgets.
Infographics
Infographics are a visual representation of information or data, e.g. as a chart or diagram. They’re well suited to add an interactive elements. It totally makes sense to be able to click on these graphics and bring up more information.
Creating good infographics is a bit of an art, and fortunately there are a number of great tools to help you create infographics. A good template can also go a long way and there are lots of free infographic templates available online.
If you’re making an infographic for iPads, make sure you use a template with a 4:3 aspect ratio. This image size fits perfectly on the iPad screen.
Once you have a basic infographic create, fire up BookWidgets and create a new Hotspot widget. Next, set your infographic as the background image.
Infographic images are typically quite tall, so you’ll want to set the “image resize policy” to “Image draggable and resizable”.
With the background image set, you can now start adding hotspots on your graphic. Choose between Text, Image, Video, Web or Audio.
Just FYI, text is more than plain text. In this text you can add images, YouTube videos, links and more. Check out the tutorial at the end of this blogpost.
Here’s an example. The hotspots on this infographic are hidden, can you find them all?
Games
There’s an old board game called “Game of the Goose”. All kind of varieties are possible with this game.
This game is great for a hotspot image widget. You can make the board interactive. I’ve combined the game with the energizers for students tips from Lucie. Each of the fields gives an energizer game for the children to play.
Here you can find the result:
TIP: use a Randomness widget to roll the dice.
Product marketing
This is an obvious choice. The example used is the interior of a car. Clicking on the different elements in the image will reveal extra information. This kind of interactive images can be used in manuals, product presentations, etc.
Interactive images in the classroom
Here are a couple examples on how you can use interactive images for specific courses.
Geography
Yes, a picture is worth a thousand words, just click and see what you can do in geography lessons.
History
Pieter Bruegel the Elder is a famous Flemish renaissance painter. One of his most remarkable works is “Netherlandish Proverbs” which offers a literal illustrations of Dutch language proverbs and idioms.
This is what you can make of it when using hotspots! I’ve created a Flemish version (the native language of the painter) and an English version.
Biology
It’s probably quite obvious how this widget can be used in biology lessons.
Here’s a small example.
Every other possible class
Use your own imagination and please share your examples with us. We know that there are endless possibilities with the Hotspot Image widget.
Licenses and image attribution
When creating hotspot images, you are most likely working with images which are created by someone else. It’s sometimes hard to understand how to use images you find on the internet legally.
In our free guide “Learning Materials for Mobile Devices” you can find some useful tips and tricks where to find images which are free to use. Make sure to check this out before using someone else’s pictures.
How to make an interactive hotspot image widget
And now it’s your turn.
If you need some help, have a look at the step-by-step tutorial below and you’ll see that it’s not hard at all!
