Add interactive images

Hi, is there any way to introduce interactive images? That is, images that when clicked take you to another page of the app.
Thanks!

Hello,
you could assign a flow function to every image eg. ‘open page’ or even better ‘replace page’ (the latter will not slow down the system as opposed to open page).
If you have to many images though, and the content is dynamic, i would suggest using databases with every image assigned to an id. This way you would need only two pages: one for the complete collection of images and one for the ‘detailed’ view lets say.

Hi, sorry, I didn’t explain well.
What I meant was that clicking on a specific part of the image opens another page. For example, in the attached image I want that when you click on the frog, another page opens.

I see. Well first thing first, I’m by no means an expert in this. Secondly, let’s see if I can help saying that: you could use a transparent png, a container or whatever attached to that position, and assign that element an open page function (?)
The element will not be visible, it would use an index greater than 1 meaning it will be in front of the main image so when clicked it will open another page.
I haven’t tried this, I’m just guessing it might work.

It’s a great idea, but how can I put one image on top of the other? :thinking:

Hi, Judith, the simplest approach, in my opinion, would be to set a firm size (say, 500 x 500px width and height or the like) to a container and then assign a picture as the background to that container similar to this:
Screenshot 2021-04-03 132034
I’d recommend using perfect square image, if possible, to ensure it displays correctly in your container. If your picture still doesn’t quite look right, go into the Style tab for the container and scroll down to the Image section and consider setting it to “Cover” to center the image.

You would then place another container into the first one with your background image and set a height and width to this new container of whatever size you feel is appropriate for clicking or tapping by the user – say, 50 x 50px.

If you wanted to apply a background color and/or borders, icons, and text to the link container, go ahead and do so. If you want it to be invisible, hovering over things in the background picture that should have the illusion of being click-able, then leave the button container’s styling as it is.

Then go to the Style tab of the button container and scroll all the way down to Advanced Properties and set the Position attribute to Absolute from Relative as shown here:

Now scroll back up the Style section to Dimension and Position and clicking the sub-tab, Position, as shown here:

You can now freely move it around in the parent container by manipulating the number fields as shown below to slide the component around and into your desired position. (You won’t need to worry about z-index in this example):
Screenshot 2021-04-03 133833

Finally, you can assign Open Page/Replace Page logic to navigate to different pages via your logic flow by connecting such logic component to the Component Tap block. Test when done. If done correctly, clicking/tapping a desired part of the “image” should carry you to the page you’ve set.

Addendum: Once you have the first button container set up, you can easily duplicate it and set different Open Page logic, if needed, for the others.

I hope that gets you started. Good luck! :slight_smile:

  1. Oh, and to be clear, I did write this with the default assumption that you might be working on a web app (which is run in your browser on your computer or phone). If you’re developing primarily for mobile, you’ll need smaller dimensions, of course.

  2. Also, if your image is not a perfect square but you know the its exact dimensions, you can specify that the container be at those specific dimensions too (if it cuts off part of the background image when set with square dimensions). Ultimately, depending on your use case, just experiment around. :slight_smile:

Fantastic!!! It works!!! :heart_eyes:
Thank you very much Dominik, I am very grateful to you!!! :hugs:

Glad it worked for you!

Out of curiosity, are you building some kind of find-the-hidden-thing game app or, perhaps, a find-the-hidden-thing-and-then-learn-more-about-it educational kind of app? If the critter weren’t circled in the picture you’d posted, I might’ve completely missed it. :wink:

ha ha ha …
Yes, it is, I’m trying to create an application with games (like a digital escape room). But I don’t know if I’ll get away with it, it’s pretty complicated and I’m pretty new to it! :sweat_smile:

1 Like

Keep at it, Judith. Appgyver isn’t always the most intuitive program to use (yet) and I’ve encountered many knowledge hurdles, but the satisfaction of overcoming and figuring them out, and then seeing your web/native app become more and more like what you’d conceptualized – Mm, chef’s kiss! :+1:

Good luck!

Thank you so much, we will keep working on it! :wink: