Jump to content

JohnWorsham

Member
  • Posts

    1
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

JohnWorsham's Achievements

Level 1

Level 1 (1/20)

0

Reputation

  1. I used www.image-map.net to generate the map code. This took a lot of figuring out to get this to work in Squarespace but I finally discovered how to do it. You must put the code in an Embed block (not a Code block). Click Edit Embed block then click the </> option to the right so you can paste your code into it. My code looks like this: <div> <img class="marginauto" src="https://static1.squarespace.com/static/5d0bcba6c62d2d000161a2dd/t/5e6f936314ecd33f62bb2bfb/1584370534064/LGMLogo.png 1000w" usemap="#image-map" /> </div> <style> .marginauto { margin: 0px auto 0px; display: block; } </style> <map name="image-map"> <area target="" alt="" title="" href="https://www.link1.com" coords="192,399,75" shape="circle"> <area target="" alt="" title="" href="https://www.link2.com" coords="387,399,75" shape="circle"> <area target="" alt="" title="" href="https://www.link3.com" coords="600,399,75" shape="circle"> <area target="" alt="" title="" href="https://www.link4.com" coords="805,399,75" shape="circle"> </map> This defines 4 circular areas that are clickable on the image (the URLs above are dummy urls for this illustration - replace with your own) It works fine, but the image is mostly fixed in size and position. You can adjust it a little with a spacer block. Hope this helps.
×
×
  • 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.