I have a picture of an apple tree. There are 37 apples in the tree. Each apple should be linked to a specific point in the text on the same page. Is it possible to implement this at all? If so, how?
Yes. It’s called an image map. There are numerous posts on the forum you can find. And also a number of online image map generators that make it easy to achieve.
Thanks Malachiman - I put each text in own block. How can I determine what text is in any block when the Blocs App does not show their sequence number?
I don’t follow what you are saying sorry.
I think what you’re trying to say is how do you make a specific link go to the appropriate block of text. If I’m correct, you would use the ID field to name each block of text and then use that ID in your link
1 Like
Probable you can check here if it helps you (this link has been previously shared in another topic)…
Thanks hendon - You’ll right; my question was how do I make a specific link go to the appropriate block of text. And you had the right answer. Sorry my english is helped with google translate, and that is not always so good!
Well - now I have make the link to the first four Apples and I have the code. But where I place the code? On that page where I have the picture, I assume. And there are three alternatives: Header, Footer and Before <!DOCTYPE>. To which of these? By the way; I have used “imagemap.org” image map generator. But You can’t save what have you done, and continue later!
Use the code widget bric.
The image map generator works completely in your browser, which is why it doesn’t save.
I have found the Code Widget Bric, and I can place the code into it. But how do I get the code to link to my apple tree image. Now I have placed Code Widget Bric right after image widget. But this way it doesn’t work!
I have try to put the code for pointing to the image. But it doesn’t work yet. I am still unsure where to place the Code Widget Bric on design canvas! Now I have placed it right after image. Is it right? In this case, question marks appear where the Code Widget Bric is located on the page. Why?
Place the code where you want it, the code will load the image if you link it correctly.
Or another way is remove the image from the code, use an image bric and add the custom attributes, mainly the usemap="#image_map"
1 Like
Do you mean that I don’t have to place the image on the page at all, because the “code” retrieves the image and displays it where the widget is placed?
I don’t fully understand how to write the place where the image is. All the images are in the “img” -folder on the server. And the name of the image is “Feri_Omenapuu-4”. Should it be like this: <img src=​"img/Feri_Omenapuu-4.png" alt=​"Feri_Omenapuu-4.png" usemap=“#image_map”>​
This don’t work!
That is what i did, but this is how the page looks like and no picture appears! Question marks are where the Code Widgets is placed.
Yes. Responsive image maps are possible but complex. There are several GitHub projects achieving it though.
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?
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?
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.
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?