Jump to content

Creating highlights to image with clickable areas


Recommended Posts

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>
<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>


Link to comment
Share on other sites

Hi, Rugula.

Code doesn't open in my pc because it needs particular app to open.

So i think you need a mouse over effect on square areas may be!

For that you can use the :hover pseudo code in css. And onmouseover and onmouseout event in javascript.


<img onmouseover="fun()" onmouseout="fun1()"/>

function fun(){ your code};

Same as onmouseout function.


img : hover{

background-color: red;


I hope you get it. May this is your answer.


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...