Rugula Posted November 14, 2020 Share Posted November 14, 2020 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 Link to comment Share on other sites More sharing options...
shaili_shah Posted November 20, 2020 Share Posted November 20, 2020 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. JS: <img onmouseover="fun()" onmouseout="fun1()"/> function fun(){ your code}; Same as onmouseout function. CSS: img : hover{ background-color: red; } I hope you get it. May this is your answer. Thanks! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now