Interactive images with hotspots

Hello community,

In order to make an interactive image with hotspots and, when you move the mouse over, it pops-up a modal or tooltip, what would you use in Blocs ?

I first thought of having a main DIV with background image and imbricated DIV’s with buttons. The I remembered (long time ago :sweat_smile:) the image maps with coordinates. Found this website which propose interactive image creation online.

Mine would look like that. Well, sort of:

What technique would you use with Blocs and Bootstrap 5 ?

Thanks.

Thanks @Jerry I’ll have a look at that. It’s free but also an application to download and an account to open.

the basic of this is the “HTML IMAGE MAP” attribute, which can be used to define an area on an image and the link to it. This has been in the HTML repertoire for ages and is very old. If you only want simple hotspots there are tools.

Google for “HTML IMAGE MAP” and helper or tool. Be careful not to use “MAPS”, that would be the right maps. There are certainly a lot of tools…

You could easily just use Flex to create this, if you didn’t want to use an image map.

Something similar was discussed a while back…

But it gives you options for your approach.

1 Like

Sorry for the late reply. I’m currently finishing jobs and have no time to go on this interactive image.

Years ago we used to create HTML image map with the slice tool of Photoshop but it is obsolete.

@PeteSharp approach with flex seems interesting. Thank you very much example file. I confess I don’t know much about flex and grids so I stick to DIV’s rows and columns. It’s quite sometimes I think I should get into this flex approach.

In the mean time I also found this Genially website and an app, ImageMapPro which seems can create interactive images.

When I get some time, I’ll look into the text overlay example project.

Thanks again.

I tried your flex approach and you can see the result on this page. The site is still in development and I’m waiting for the client feedback next month.

It is working very well although it took some times to understand and adjust the classes for different key points. But it is still much easier than doing an image map or an HTML 5 animation.

So thank you so much @PeteSharp :pray: