WebSite X5Help Center

 
Michael L.
Michael L.
User

How to add clickable buttons on an image  en

Auteur : Michael L.
Visité 1690, Followers 2, Partagé 0  

My problem is, say I have a full image and I need to place 4 clickable buttons over the image. Each time I place an image I cannot overlay any buttons or other image/text OVER the image because it will ask me if I want to overwrite the existing image. This means I can't place anything OVER the image especially clickable buttons. Pls see attached image. If I want to make the 4 "LEARN MORE' red buttons clickable and place them over the image I cannot seem to do it in Website X5 ? Pls help and advise.

Posté le
4 RéPONSES - 1 UTILES - 1 CORRECT
John S.
John S.
User

Hello Michael

You can use some code for that. You specify the image you want and then you specify some areas on the image.

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

You can see the example here : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_map2

You can also make changes in the example.

This is one of the ways to do it.

Lire plus
Posté le de John S.
Craig K.
Craig K.
User

I've done this by simply setting the image using the row (not the image object). Here are the steps:

1. Go to page.

2. Click on row format

3. Select the rows you are interested in

4. Change to image on the dropdown on the right

5. Add image

6. Don't forget to click on checkmark to save

7. Then place button on the rows with the image

Lire plus
Posté le de Craig K.
Esahc ..
Esahc ..
Moderator

Michael, Craig has the easiest solution. Lay out your page as in your screen shot and then use row formats to add an image behind the selected rows.

Lire plus
Posté le de Esahc ..