Creating Interactive Images with Genially

Get Support:

The Digital Skills team can support staff with developing core IT Skills

The Digital Learning Team can support you with using digital tools for teaching and learning.

About Quick CPD

Quick CPD are bite sized videos (from 30 seconds to 3 minutes) that you can watch over a cuppa. Get inspired, learn a new skill that you can quickly put to use in your job and share with colleagues.

Quick CPD is brought to you by the Digital Learning Team. If you have any suggestions for content you would like us to cover, please get in touch: digitallearning@shu.ac.uk

Creating Interactive Images with Genially

Using online platform Genially to create interactive images that can be embedded into BB sites or other learning resources.

[Transcription of the above video]

I wanted to show you how to make interactive images and interactive maps and such like. You can use for a lot of things. You can use for diagrams with the parts labelled on them. You can use them as we have done here for interactive maps. You could use them for pictures that you might want people to analyse.

And we’re going to use this website here. Genially, that’s genial dot LY. Now I already have an account as you can see by the fact that I’ve got kind of some things here. You can just create a free account, there’s no need to pay for it. Everything we need is on the free version.

When you go to creations, you’re not going to see [this]. I’ve got some stuff already here because I’ve already created some. You’re just going to see this [create Genially], so we’re going to click on that now here, it’s got the last thing I used again, you’re not going to have that because you’re coming in for the first time.

So we’re going to click on Interactive Image and we’re just going to go to Basic Interactive image and click Use this template and that’s going to take a second to load. Here we go when we get this rather busy looking screen. Now the first thing I think is easiest to do, and it’s annoying that you have to do this, is I’m just going to click on all these things, and I know you can’t see my keyboard, but I’m just pressing delete gets me down to this.

This is my background; this is the actual image that I’m going to make interactive. What I really recommend you do if you’ve got an image, particularly one with a lot of text on, then unlock it and go to this one here and just change the size of the canvas to the size of your image. Because otherwise if you’re changing the size too greatly it can blur and so on.

Now I’ve actually got one ready to go. Just click off that right. I’ve actually got one ready to go, so I’m going to upload an image to it. Got these buttons here. I’m going to click on Replace. Now I can. They’ve got something built. I could link to an image. I’m actually just going to grab one that I have handy. It’s actually one of those maps and you can see after a second it uploads. Now what I’m going to do to place these hotspots, I’m going to go over here to interactive elements that this is the thing that will appear on your map.

Here’s just kind of the basic ones. Or there’s a huge kind of list of them. I actually like this one, so I’m going to use this one. I’m going to place this wherever I want on my map. Whatever ever image it is I’m using and then this comes up.

Now [Tooltip] will show a little text box and we’ll have a look at some of these tool tips we’ll show. A little text box. [Link] will mean when I click on that part of the image it takes me somewhere else. [Window] I could open up a video or an animation or something similar. This [Go to Page] would move me. We’re not going to really look at this, but this would move me to another genially page. This [Full Screen] just makes the image full screen. This [Audio] will play an audio file and this [Reveal] will, well it says here, make other content appear on the screen.

So let’s start off with tooltip and I’m just going to write whatever here. Whatever. Now what I can do, If I go to present I’m going to get this and I’m just going to click all set and after a second you can see I’ve got the image. I’ve got this tooltip when I move my mouse over it, so it’s obviously for. It’s not the most useful interactive map, but for an interactive map you could say what’s there for a diagram, What part of the structure is this. If you were analysing some code potentially, what does this line do?

The other things I could do if I wanted to put a link on, let’s just take this to Google or Google. Oops, so now, let me just refresh this. When I click on this it takes me to Google. So yeah, it’s free. It’s quite easy to use.

These can be embedded in Blackboard as well. If you grab the insert link, you can just copy and paste that into Blackboard and they’ll appear in there.

Get Support:

The Digital Skills team can support staff with developing core IT Skills

The Digital Learning Team can support you with using digital tools for teaching and learning.

About Quick CPD

Quick CPD are bite sized videos (from 30 seconds to 3 minutes) that you can watch over a cuppa. Get inspired, learn a new skill that you can quickly put to use in your job and share with colleagues.

Quick CPD is brought to you by the Digital Learning Team. If you have any suggestions for content you would like us to cover, please get in touch: digitallearning@shu.ac.uk