Jump to content

Rugula

Members
  • Posts

    1
  • Joined

  • Last visited

Everything posted by Rugula

  1. I've created a cliackable image map using CSS as I couldn't get the image.map to be responsive with the coordinates responding to changes in image sizes and I just couldn't seem to work out how to make an SVG image map work on Square Space. My code works great embeded on square space and clicks through (though not opening a new tab) but i haven't worked out how to make the clickable areas highlight on and off as the mouse moves over. This is my code: <!doctype html> <html> <div class="container3"></div> <div style="position: relative;"> <img src="https://static1.squarespace.com/static/5f7c87dc6c8cd200448aed7c/t/5f918dfd2198fa40b5c73f58/1603374596057/FHIORTEST.jpg" style="width: 100%; height: auto;"> <a href="https://root-to-market.co.uk/" title="shop"><div style="position: absolute; left: 19.38702779757662%; top: 79.63709677419355%; width: 26.44333570919458%; height: 11.794354838709678%; background-color: rgba(0, 0, 0, 0);"></div></a> <a href="https://secretherb-garden.squarespace.com/eventsbyfhior" title="events"><div style="position: absolute; left: 21.525302922309336%; top: 63.306451612903224%; width: 16.82109764789736%; height: 11.995967741935484%; background-color: rgba(0, 0, 0, 0);"></div></a> <a href="https://secretherb-garden.squarespace.com/fhiorgardencafe" titel="cafe"><div style="position: absolute; left: 38.346400570206704%; top: 63.50806451612904%; width: 12.829650748396293%; height: 9.07258064516129%; background-color: rgba(0, 0, 0, 0);"></div></a> <a href="https://secretherb-garden.squarespace.com/weddings" title=weddings"><div style="position: absolute; left: 67.85459729151817%; top: 81.1491935483871%; width: 11.903064861012117%; height: 14.616935483870968%; background-color: rgba(0, 0, 0, 0);"></div></a> <a href="https://www.theoldcuriosity.co.uk" title=distillery><div style="position: absolute; left: 47.96863863150392%; top: 72.47983870967742%; width: 15.32430506058446%; height: 16.834677419354836%; background-color: rgba(0, 0, 0, 0);"></div></a> <a href="https://secretherb-garden.squarespace.com/fhiorgardencafe" title="garden"><div style="position: absolute; left: 87.2416250890948%; top: 36.29032258064516%; width: 7.127583749109053%; height: 15.32258064516129%; background-color: rgba(0, 0, 0, 0);"></div></a> <a href="http://secretherbgarden.co.uk/product-category/herbs/all/" title="nursery"><div style="position: absolute; left: 36.77833214540271%; top: 14.919354838709678%; width: 9.123307198859587%; height: 24.39516129032258%;background-color: rgba(0, 0, 0, 0);"></div></a> </html> fhiorcss1.2
×
×
  • Create New...