HTML <area> Tag | How to use this?

Site URL: https://www.elevenaustralia.nl/colour

Hi everyone,

Curious if we could get an HTML <area> tag to work in Squarespace...

Our client has asked to rebuild this page (non SQS): https://elevenaustralia.com/colour/ in the .nl website (SQS) https://www.elevenaustralia.nl/colour.

The .com page has an image in which a HTML <area> Tag is used, which makes little text boxes popup while hovering certain areas of the image. See print screen attached.

Our client is fine adding the steps in text underneath the visual but since this area tag solution is quite neat, I'm wondering if we could get it to work. Also because it seems such solution has not yet been shared before in the Circle.

Does anyone feel like getting his/her head around it?

Cheers,

Diederik

16 hours ago, Diederik1570047953 said:

I'm wondering if we could get it to work.

Yes. The least work would be to do it using a code block in the Page and some other settings. Basically you would copy the most minimal HTML, CSS and JavaScript over from the original site.

First create a code block in your Page. Then copy the DIV that starts "<div class="image-map steps">" from the original site into the code block.

Second and this is a bit labor intensive. Copy over only the CSS and scripts related to making the hover effect work. Put all that into Settings > Advanced > PAGE HEADER CODE INJECTION for the Page.

That should get you pretty close.

If you are going to use the jQuery library site wide then you'd want to put the HTML for that in Home> Settings > Advanced > Code Injection > HEADER.

You'll need at least the business plan for this to work.