Jump to content

HTML <area> Tag | How to use this?

Recommended Posts

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?



Aantekening 2020-09-04 065618.jpg

Link to comment
  • Replies 1
  • Created
  • Last Reply
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.