Using the custom CSS capability of Weaver Xtreme Pro to Map an area of an image

[AshbyNavis]

Here’s the page I’m working on https://ashbynavis.com/beyond-the-business-card-2/ 

The image I want to map is the bottom one. It’s the Pricing image. I’d like to map the rectangles  around the monthly price and the yearly price to send the user to the correct page. I have this proposed modifications to the page

<a class=”monthly-link”
href=”/monthly”>
<a class=”yearly-link”
href=”/yearly”>

and for CSS

.pricing-wrapper{
position:relative;
display:inline-block;
}

.monthly-link{
position:absolute;
left:12%;
top:18%;
width:32%;
height:58%;
}

.yearly-link{
position:absolute;
left:55%;
top:18%;
width:32%;
height:58%;
}
I’m not certain where to place this, any help is gratefully appreciated.

Hank

[scrambler]

Your link returns “no such page”

[AshbyNavis]

whoops. I forgot I changed the slug and didn’t update the post got busy, sorry https://ashbynavis.com/meet-the-future I had a senior moment lol

 

[scrambler]

Sorry, but I do not understand what you are trying to do.

The two buttons at the bottom already have image backgrounds.

So you need to be a lot more detailed about what you are trying to do.

As for custom CSS if you know what you are doing with it, it can go in the theme Global custom CSS rule box  found in the customiser (where mode) Custom CSS section

[scrambler]

If what you are trying to do is to create the clickable links inside the last large image and above the corresponding button area of that image, and if you are not familiar with HTML coding, then you will need a dedicated hotspot block as explained in the google search below

worpress block to add several clickable areas on an image – Google Search

 

[AshbyNavis]

I’ve tried Draw Attention and it’s not very well documented and is incredibly clutzy. I’ll look at the other one. I did a google search before I came here, I was hoping to find out how to put the custom CSS on the image. but never mind

[scrambler]

It can be done with HTML, but you would need to understand HTML to do that.

You cant just add CSS, you need to create the image in an HTML container in which you also put the links. Once the image and the links are in the same container, then you can use CSS to position the link areas.

If you want to give it a try, check the AI search below

How to create an image with several clickable link areas without using a map

 

[AshbyNavis]

I know HTML so that’s not a problem, I’ll take a look at that link thanks

 

[scrambler]

This reply has been accepted as the best answer.

The second method with CSS positioned anchors may be the safest most compatible to use.

I found out I needed to make the search viewable by all, so here is the public link

https://www.perplexity.ai/search/a4bac53e-c49e-4c64-b20e-5c262aa03074

 

[AshbyNavis]

Scrambler turning it into a svg was the solution and also using Weaver Xtreme Page per page options made it do what I needed it to do – so thank you very much, I greatly appreciate it.

[Author]

Posts