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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...