Active areas on an image

I Need Help
1

Hello everyone,

I would appreciate your wisdom and ideas on this: I want to have/define active areas on an image where the user can click and follow a link.

Is there a clever way to do this in Blocs?

All the best and many thanks,
Costas

2

Hi @CAS

You can you an image map for this. Here is a free online generator that does the job.

https://www.image-map.net/

Then use the code bric to add the supplied code to your site.

1 Like
3

Cheers! I will try it straight away…

4

Hi @PeteSharp,

That worked very well! Thank you…

I am trying to create a visual help page holding the image of an app and setting active areas so the user can click on the area of interest and have a pop-up with the help text.

So, I need to redirect each clickable area to a unique href=”/webpage#id” which works fine when I try it with blocs but not for modals that I need to use. Should it work or I am doing something silly? Or there is a simple way to have pop-ups and not use modals?

Best,
Costas

5

Hi @CAS

Modals just need a couple of attributes to work, you don’t need the href. So you can edit the code by adding something like this

data-toggle="modal" data-target="#modalID"
2 Likes
6

I wish i could input your knowledge of Bootstrap/Blocs/Code in my head as a permanent fixture !!!

7

I don’t know about that, I am self taught and still at the entry levels of learning js. I just learn as I go and figure out what I need when I need it. There are a number of really good coders here.

2 Likes
8

Thank you @PeteSharp! I might be overcomplikating things here but I cannot get it to work…

I have set up the modal custom attributes to data-target=“modal-28516” (the modal ID) and I have used this html:

The map loads fine and the set area is active but the modal does not want to oblige… Also, if I do not use href, the set area stops being active.

Best,
Costas

9

I don’t understand why the code dissapeared…

here it is:

image
image2158Ă—930 263 KB

10

The data target needs a # at the beginning as it’s an ID.

11

Why do you have the href = data target?.

12

Without the href I do not get the active area on the image…

13

That´s a great hint as always - Thanks @PeteSharp!
One question still seems to be open:
Will this support Responsive too?

14

Image maps do not usually respond to different device sizes. This is because the image is placed at its intended design size (the orgnal image dimensions) and the hotspot overlay is then placed over the fixed size image so that the coordinates of each hotspot are in the correct place. However, you can create different size versions for different breakpoints and use the visibility options in Blocs to hide or display each version on the correct device. Just plan your image sizes in advance by placing the intended image in your blocs project. Make a note of the images size (on the page) for each breakpoint. Then create separate images of the 4 breakpoint sizes and use the image map generator to make a set of image maps.

1 Like
15

Thanks! And yes I thought so as even in word press you need to install the “responsive” plugin for that (old but still does the job).
Always great to look at your hints and very grateful to all your efforts :+1:

16

Yes as @hendon52 said. I have never tried it, but maybe wrapping the code in BS responsive classes would give it some more flexibility. But you would still want multiple breakpoint images.

1 Like
17

I see there is actually a JavaScript project to make image maps responsive. I’m not going to explore it. Just putting it out there.

18

Hello I make it works responsive…

2 Likes
19

very impressed that you are self taught…you are very resourceful :sunglasses: