How to creat a transparent button overlay for an image?

hattenbachlars · 2024-08-23T22:05:12.555Z

Hey bubblers, so the idea is to have a graphic/image with objects like cars, people, objects and so on you understand so just basic stuff… If the user hovers over that object i want the page to display data in a focus group relative to that object or when the user clicks on it data on a sidebar gets displayed with more informations…

How can I dynamically create this depending on how many objects are in that graphic/image. First thought a repeating group yes, but to hover or click on that object the button has to be in that custom shape of that specific object in the image/graphic. So I think your already seeing the problem I am encountering, if theres a plugin for that I havent found yet or another maybe more trckier but working solution I would be so thankful

AND if possible, Iam really not seeing another way for that without a repeating group, is that the enduser Can add that button layout himself but I think this is just too much to ask for. Thank you for reading this Question in advance!

Lars

hattenbachlars · 2024-08-24T20:59:15.215Z

anyone?

senecadatabase · 2024-08-24T22:03:33.473Z

It sounds like you’re trying to create hotspots on an image?

It can be done using code, but I don’t know how experienced you are with that.

Based on what I DO know about Bubble so far…

I’m thinking create a group that is align to parent. Place an image in the group aligned to center…then create invisible buttons aligned where you need them over whatever you want?

Then, do a workflow so when button 1 (or whatever) was hovered it would show a focus group and when clicked show another group.

There are widgets on sites like Common Ninja that give you the ability to create hotspots. But, whether it would work in Bubble I have no idea…although they say it does.

So, if I’m understanding your question that would be my thoughts.

Then again maybe I’m just rambling. I get working on a project for a few hours then have to do something to clear my mind

hattenbachlars · 2024-08-25T00:15:47.300Z

Thank you very much for your reply and thoughts about this. It means a lot!

I just looked into the Hot Spot widget by Common Ninja. They offer a full SDK, but it wasn’t as customizable as I expected after browsing through their website.

I was thinking about coding something myself, but I’ve never implemented anything that interacts with data from my database before. The tricky part is creating a custom-shaped button in form of the flower like a masking—like a flower, for example. The idea is that when a user hovers over the flower, it gets highlighted in blue, and if they click on it, more information about the flower is displayed.

At first, I thought I could use the “custom shape” plugin, but I found out there’s no option to add a workflow to that, which would have solved a lot of my problems. Another challenge I’m facing is with something like a bookshelf image with 50 books, where each book has a different size. I want to enable hovering over each book, but I’m unsure how to create buttons of different sizes for each book in a repeating group. So I can basically just update the image on the frontend, add new text to the new book and add another book-shaped-button. So like just adding or removing a book from the bookshelf

senecadatabase · 2024-08-25T00:39:17.256Z

I understand what you’re saying…

but also ask yourself if all this really matters?

I’ve seen apps that have spent hundreds of thousands on a feature and nobody cared.

It’s like Webflow where you can do twirling whatever, and spinning whatever…but who cares?

It’s all about serving the user and creating an income for yourself.

Users only care what your app can do for them. They don’t care about all the thrills and frills you can offer in the way of cute…and what you consider technological breakthroughs.

I would seriously look at your concept and decide if it was really worth it.

Maybe it is with your use case, I don’t know.

But, usually, a lot of what we think is important, isn’t.

Hopefully, you can figure out a good route to take.

hattenbachlars · 2024-08-25T01:11:02.453Z

Understandable, so I am creating a 3D animation Illusion like this, an then want to implement the button overlay so its more like a product iam trying to creat than a feature:

example-turntable-vs-code

sorry for the GIF bubbe won’t let me upload videos

senecadatabase · 2024-08-25T01:32:00.243Z

You’re kind of losing me a little bit on this…

first, it seemed like hotspots on an image and now some 3D thing?

I’m a little confused.

hattenbachlars · 2024-08-25T01:57:02.954Z

Iam sorry. So basically the Hotspots overlay will be on each key frame/view different (the three images on the bottom), because some objects will be naturally hidden by perspective

The intention behind this is because highly detailed scenes on the web are mostly pretty slow without pixelstreaming. So this approach will offer the user to showcase there scene in an interactive (a.e. on their website/portfolio) way by rendering a video and exporting each frame. After importing their frames and the overlay of the buttons will be applied either by me or the user over each key frame

I am sorry for the confusion

*The switching between overlays is not a problem, already solved it

senecadatabase · 2024-08-25T02:11:41.256Z

Ok, gotcha…

I’ve worked on Uber, Doordash, and Instacart to name a few.

But, maybe someone with more experience at Bubble than I have can help you with doing that in Bubble.

Bubble, as I’ve discovered has their own way of doing things. I just don’t know how to do it with what you want.

I hope you get an answer.

hattenbachlars · 2024-08-25T02:16:49.643Z

That’s pretty cool!

Still Thank you very much for your time, I really appreciate your support

system · 2024-11-01T22:06:03.740Z

This topic was automatically closed after 70 days. New replies are no longer allowed.