Jump to content

mouse hover effects on image map

Recommended Posts

Site URL: https://gregory-ain.squarespace.com

hi squarespace experts!  

as a non-coder i'm looking for an assist on a page i've created using the york template.  

i've got a responsive image map working very nicely as a code block on the page, but would like to add some hover effects on mouse over and on mouse out (not the technical terms, i know).  ideally the on mouse over would unblur the specific portions of the image that are hot spots.  i do have the unblurred portions of the image saved as separate files.  

this is the code i'm currently using.  although the image map has six different hot spots, i've included just a portion of the code (for one hot spot) to simplify things for anyone that might be able to help.

any advice is greatly appreciated!

<img src="https://static1.squarespace.com/static/5f861b8ef918960d6454dea6/t/5f974d123a11f76bae215959/1603751187099/1_%C2%A9MAP_MoMAnoimage.jpeg" usemap="#image_map">

<map name="image_map">

<a href="https://gregory-ain.squarespace.com/gregory-ain" title="Gregory Ain" style="position: absolute; left: 0.46%; top: 5.08%; width: 22.49%; height: 15.89%; z-index: Gregory Ain;"></a>

Edited by crystaln
Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Please provide a password

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

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

×
×
  • 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.