Jump to content

Interactive Hotspot Graphic Plugin or Code

Recommended Posts

Does anyone know how to build out something like the interactive hotspots graphic on this page under "Fredricks Design Transportation & Automotive Market Overview"? I'm sure there would need to be a plugin to accomplish this but haven't found one yet that would really fit the needs. Anyone know of one?

I don't have a site built out yet, but it would be on 7.1 FE.

https://fredricks.com/transportation-automotive-design/

Link to comment
  • Replies 1
  • Views 1k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

I once helped a member do this, simpler version (with click behavior, use Gallery Block Slideshow)

You try find a free code on Codepen, then we can convert it to Code Block in Squarespace.

Or, I could try this, but it's not really good and you need to adjust across devices to make sure they're in place.

  • As an example, we will see 4 dots and 4 yellow elements appear when hovering dot. You can add 4 Image Blocks overlap together, each image will have a yellow element.
  • Next, you add 4 Text Blocks and adjust their position like the example
  • We will give the code to: (1) make text invisible initial - (2) Add 4 dots under 4 text block - (3) Hover on each dots >> Make text appear + Make 1 image appear + Hide 3 other images

Can you imagine what I would do?

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (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.