Jump to content

CSS for Map plug in to have hovering light effect

Recommended Posts

Site URL: https://cbcbellevue.com

Hello!

I have an idea in mind and I'm not sure if it is possible but wanted to ask the experts and see if they had any ideas.

I just bought a plug in for the map on my page so that it can feature multiple locations tagged in different areas sourcing from a blog/events list etc...

Each location can then have a pop up of the excerpt that has the location listed (from the blog selected) and my idea is for the map to be black and white/grayscale (already can do that) and then when someone clicks the marker on the location the story pops up, and that city turns gold/lights up. This would only (possibly) work for this because I will have one featured story per city and would want the whole city to "light up". Below is the plug in code I had to put in the footer injection and the page I am building my test map on. Let me know if there is any possibility of making this idea come to life!

Map Code Injection:

<script src="https://assets.squarewebsites.org/sqs-map-utils/init.min.js"></script>
<script>
!function(){window.self!==window.top&&function(e,t,s){if(!s.querySelector("#"+t)){var i=document.createElement("script");i.src=e+"?cache="+((new Date).getTime()+"").substr(0,7),i.id=t,s.appendChild(i)}}("https://assets.squarewebsites.org/sqs-map-utils/map-utils-admin.min.js","map-utils-admin",window.top.document.getElementsByTagName("head")[0])}();
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>

 

page url: https://cbcbellevue.com/mock-christmas-2020

Screen Shot 2020-10-05 at 10.50.23 AM.png

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

Archived

This topic is now archived and is closed to further replies.

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