How to add clickable buttons on an image 
Author: Michael L.
Visited 1694,
Followers 2,
Shared 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.
Posted on the
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.
Here is an example with button : https://www.w3schools.com/howto/howto_css_button_on_image.asp
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
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.