Position of a button fixed on a png

Hello,

I am faced with a problem that I cannot resolve.

I’m making a site for a friend, who provided me with PNGs with CTAs directly hard-written on them.

I would like to be able to fix real buttons above, above the “drawn buttons”, and that these do not move whatever the position of the screen. (Only on desktop, I would do otherwise on mobile)

Below is a screen:

And with a change of dimension:

I’m really struggling with this, and I will really appreciate your wise advice.

Thanks in advance,

Felix


Here is my site Read-Only: Link

Hi @Felixcitation, thanks for your post and for the good question.

Quick question, is your main goal to make the CTA buttons in the image clickable, like an image map link, or is there a specific reason you want to try to overlay button elements on top of the static image versus creating an clickable region of the image?

Cheers

Hello Dave,

Thank you very much for your answer !

My goal is to make the 3 different buttons clickable, and that they each point to a specific link. Honestly, I have no preference on how to achieve this. Do you have a recommendation for me?

Thanks again,

Felix

Hi @Felixcitation, thanks for the update :slight_smile:

I do have a suggestion on how to make those three cta areas with the button clickable, it is just a suggestion, there may be other ways that like better.

First, I would give the Parent Div block a position relative:

Shared with CloudApp

Next give the image a position relative and a z-index of 1:

Shared with CloudApp

Create a Div called Link Block Wrapper and give it a position Absolute, with a full cover and a z-index of 5:

Shared with CloudApp

Create a Div block under Link Block Wrapper called Link Blocks and give it a position relative and width and height set to 100%:

Shared with CloudApp

Next add 3 link blocks to the Link Blocks div with a class name of Link block:

On the Link Block class, give width and height set to 50% and position absolute:

Shared with CloudApp

On each Link Block, you will add a combo class to each Link Block like:

Shared with CloudApp

etc…

Each link block will have a unique combo class as shown:

For each link block with the combo class set, you will set different positions and potentially different heights for each link block as follows:

Link Block 1:

Shared with CloudApp

Link Block 2:

Shared with CloudApp

Link Block 3:

Shared with CloudApp

After those structure, style changes have been made, you can select each link block and set the link settings each link block that corresponds to the CTA button in the image, which should be under each link block.

As an example, I added a little green hover color just to show what the click region looks like for each link, when someone clicks on the invisible link block, the link for that button in the image will be activated.

Here is what it looks like from Desktop to Mobile:

Here is where you can set the link for each link block:

Shared with CloudApp

I hope this helps

1 Like

That’s perfect, thank you so much! You are a saviour. Good day to you

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.