Hi! It’s great to have you here, as always. Today we’re going to show you how to turn a simple picture into an interactive image without HTML.
We already know that an image is worth a thousand words, but sometimes we have to deal with pictures full of text or, on some occasions, with too little text. Here at Genially we’d like to suggest something in between: an image worth a thousand words along with some information that’s both interesting and attractive.
| Static images | Interactive images |
|---|---|
| They have one layer of info, the one you see | They have multiple layers of info |
| They are flat | hey 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 |
What do we need to create our interactive image
First, we need to insert an image in Genially. One easy way is to upload an image as a background (select the “Background” tab, choose “Upload an image” and then after selecting your image from your computer, “Use this image as your background”).
Then, add as many pins as you want or need using the “Interactivity” tab where you can find to click and drag where you want. There are pins for all sorts of styles and needs, so look through the different options to find the ones that go best with your image. You can add all sorts of info to your pins, including: video, pictures, links to other web pages, GIFs, social media timelines, and almost anything else you can think of. Finally, we can add some animation and interactivity effects to capture the attention and interest of our audience.
Imagen interactive examples
What we’re going to show you in a few seconds is a couple of examples that could be inspirational whenever you decide to create your own interactive image. These kinds of images where pins, windows, and tooltips allow users to discover information for themselves can be used for education, business, communication, design, advertising or anything else that you want. You’ll get results as amazing as these:
Informative Poster
Generate informative or explanatory contents with this option. Let the image tell the story, or highlight some curiosity or detail of it.
Educational Poster
This is one of the best ways to learn something, because you’re memorizing information while looking for it and creating the image. And once you’re done, it’s an amazing method to study because you’ll have to remember the graphic contents.
Interactive Advertisement
You can use it to draw attention to a product, and you can also link it to the actual site where it can be bought.
Publicity Poster
A single picture and one great sentence are enough to create a convincing advertising poster.
Eye-capturing Image
We can’t know everything, but we can always keep learning new things. So, why not creating a poster to learn something different?
Interactive Catalogue
And last but not least, you can also create your own interactive catalogue with a brief description in the tag as a plus. You can include information about each article of clothing like where to buy it and the kind of fabric it’s made of.
Create your dynamic images with Genially
In this example we’ll show you how to turn a famous selfie into an awesome interactive image
- Once in Genially, click on “Create Genially” and choose “Interactive Image”.
- Next, click on “Create Interactive Image”. You can choose your image from your own computer or from a URL.
- Here comes the fun part! Once in the editor, transforming a static image into an awesome interactive one is really simple.
- 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.
- 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.
- Let’s assign a tooltip to our interactive button.
- 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.
- 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.
- 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.
- 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.
- 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.
- Click on the “insert image” icon, and select the image from your device.
Our interactive image is ready!
Tips
Share your creation
It’s the moment to share your creation using the share 
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.
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!
