Turn your static images into incredible interactive images quickly and easily

Want to make images that tell stories?

Now you can create an interactive image to enrich photos, illustrations or designs. Create different layers of information and embed all kinds of content like videos, social media, and much more!

An interactive image is useful for communicating ideas quickly.  In the end, an image is worth a thousand words!

In this post, we’ll tell you how to create an interactive image from scratch with Genially and how to share your creation while maintaining all of its features.

Static Images vs Interactive Images

But before we get started, why would you make an interactive image?  What does it offer you above and beyond a static image?

Static ImagesInteractive Images
They have one layer of info, the one you see.They have multiple layers of info..
They are flat.They are enriched with other kinds of content like videos, maps, graphics, etc.
They’re illustrative.They’re useful.
You communicate a message.You tell a story.
Consumption goes in one-direction.You need to interact with the image to consume all the content.
They are passive.They encourage exploration and memorization.

Awesome, but making a static image is really easy. If you have a cell phone in your pocket, you’ll see how easy it is to take a photo in just a few seconds. Making an interactive image can be complicated, but now it also just takes a few minutes.  We’ll explain how to make one with Genially.

Create an interactive image in Genially

1. The first step is to go to Genially and click on “Create Genially”, found in the vertical left menu. To do so, you’ll need to be registered in the tool.  If you’re not yet, no worries.  It’s free.

In this example we’ll show you how to turn a famous selfie into an awesome interactive image

2. Once in Genially, click on “Create Genially” and choose “Interactive Image”.

3. Next, click on “Create Interactive Image”. You can choose your image from your own computer or from a URL.

4. Here comes the fun part!  Once in the editor, transforming a static image into an awesome interactive one is really simple.

5. Let’s start adding interactive elements.  To add them, we just go to the interactive elements menu on the left vertical toolbar and drag them over to the canvas.

The buttons are made up of icons and animated shapes that help signal an action.  You can modify their size and color, as you can see in this example where we’ve added a button, made it larger, and colored it yellow.

To do this, select the button and choose the color from the upper horizontal toolbar.

6. We’re going to add interactivity to our button.  Click on the hand icon that appears over the button or select the button and click on the interactivity menu on the right.

7. Let’s assign a tooltip to our interactive button.

TIP: In this post we’ll show you a representation of the history of Wikipedia that uses tooltips effectively.

8. We like using tooltips with interactive buttons to add content with little text.  When you select “Tooltip”, the editor where we can insert our content will open. In the example, we’ve directly copied and pasted content from Wikipedia. You can add text, images, gifs and more to your interactive image.

9. Next, we’ll add another button, this time with a window instead of a tooltip to insert the video of the moment in which the famous selfie was taken. Repeat the previous steps, drag the button you choose from the interactive elements menu.  Here we’ve made the button larger and changed its color to red.

10. In the interactivity menu of our new button, select “window.” Windows allow us to have more content and enrich our creations with PDFs, videos, text… anything we want to add. In this example, it’s the video of the selfie-taking moment.

TIP: In this post you’ll discover interesting facts about different historical figures and can see windows in action!

11. To add a video, we’ll just go to youtube, copy the url of the video that appears in the “share” option, and paste it in the window.  Almost magic! Click on “save” to make your window start working.

12. Our video is now embedded in the window. You can preview the genially to see how it looks.

TIP: Videos can also be embedded in tooltips. In this post you’ll see some of the most impactful videos from the Olympic Games in tooltips.

13. To finish enriching our interactive image, we’ll add an invisible area found in the interactive elements menu on the left vertical toolbar.  Just drag the area to the canvas and place it over the part of the image you want to make interactive. You can also change its size.

14. With the invisible area selected, access the interactivity menu and select “tooltip”. Here, we’ll add an image with three Oscars in a tooltip that will appear when the viewer puts the cursor over Ellen DeGeneres’s face. You can also load your own images in the editor to appear in the invisible area.

15. Click on the “insert image” icon, and select the image from your device.  

16. Remember to click on Save so that your image is inserted correctly in the tooltip.

Our interactive image is ready!


Share your creation

It’s the moment to share your creation using the share share icon button on the upper toolbar

Genially allows four main ways of sharing:

  • With a link
  • Inserted in your blog or web
  • Sent to email
  • Shared on social media

These options allow you to preserve your creation’s originality, animation and interactivity. If you want to learn more about the different sharing options with Genially, check out this artícle from our help center.

Types of Interactivity

You can make any resource (text, image, icon, photo, etc.) interactive. Just select an object and click on the icon that appears on the right.  There are 4 types of interactivity:

  • Tooltips: Tooltips are used to show small amounts of content and they appear when the cursor passes over the element; they are deactivated when the cursor is moved to another area. We recommend texts of less than 300 characters in the tooltips for optimal viewing.
  • Windows: Windows are appropriate for filling with more content than tooltips.  Even so, avoid large amounts of text in windows and tooltips.  They are activated when the viewer clicks on the element and are deactivated when the window is closed by clicking on the x.
  • Go to page: this feature allows you to navigate between pages through different elements. It’s a feature made especially for use in guides, microsites, games, etc.
  • Links. You also have the opportunity to link your creation with an external link.

Now you’re ready to create interactive images that leave your audience stunned.  Start bringing your content to life!

Biologist, Designer, Teacher, divulging specialized in scientific communication and Maker. I combine my passions working as Training Responsible at Genially. If you don't like something, go and improve it!
Category : Geniallymaniac

Related Posts