Multiple links in different places from one image?

Tips and Tricks
21

Yes. Responsive image maps are possible but complex. There are several GitHub projects achieving it though.

22

I would first like to learn how to write the code correctly so that I can at least make my apple tree picture appear. I have changed all uppercase letters to lowercase and removed hyphens from the names. But no picture appears yet! Is the code referring to the image really correct now?

NÀyttökuva 2021-10-18 kello 13.14.34

23

Why is there an " entity within the regular double quotation mark? :thinking: That seems a double to me and is therefore not working.

Do you have it somewhere live?

24

Now I get the apple tree visible and the links work. I simply placed the image on the same level as the html file on the page. Because the image map editor initially writes the necessary code to find the image in the “same folder”. But the same image don’t work on mobile devices!

Did the “Interactive Image Gallery” (PHP Jabbers) solve the problem with responsive pages? On Blocs App reads: IMPORTANT! The widget inapp preview should only be used for plain HTML! Can I still safely use JS or PHK code, as long as the code preview (widgets app) is not on?

25

Yes. If you have code in the code widget that’s not exclusively HTML and / or CSS you need to turn the widget preview off.

26

I looked at examples from Interactive Image Gallery. Not the base image scales according to the viewing frame, at least not in Safari! Now I need to think of other ways to implement linking. How about this: You click the image to bring up a list of “apples” and from that the reader dials the number she wants and goes to the desired point in the text?

27

It’s not interactive. You need to create an image for each breakpoint. I did a quick look at Github and the majority of the solutions provided are not interactive as well (even though claimed to be). Secondly, 90% uses JQuery which would not be your best bet for Bootstrap 5.

28

I actually found a responsive image map project on GitHub the other week when I was looking for one. It worked well when I tested it. Although I didn’t need it in the end, I’ll see if I can find it later.

1 Like