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!
Have you uploaded your image to the server and pointed the html to it?
Your html output would be something like below in the editor:
You will need to upload the Image to a folder on the server and change the first line to something like:
<img src=​"my_folder/​Screenshot_(77).png" alt=​"my fancy image" usemap="#image_map">​
1 Like
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?
You will need to add the image to a folder and direct the link to it. It works perfectly.
1 Like
As long as the image is static this should work. On a dynamic image it will mess up the coordinates.
You will need to create an image map for each breakpoint.
1 Like
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’s correct. But you will need to add the image to the /img folder manually after exporting your website for publishing.
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.
That’s correct as well. To see the image you will need to either upload it to your host or us MAMP (Pro)
EDIT: To add my 2 cents I would suggest you to use the image gallery from our friends of PHP Jabbers. It will cost you 19 bucks and in return you get no headaches, manually adding images etc. I did not long ago exactly the same for this reason.