Popup images code?

Question

I'm a novice to coding and square space and was wondering if something like this was possible on square space: https://xd.adobe.com/view/a7d76d93-ca9e-4fa6-af5b-78a040a82bf3/ My company wants me to find a way to have the first image be clickable and bring up another image (depending where you click) to show the availability of the one place you clicked. Then, we also want the second image, when clicked, to bring up the third one. Is this even possible in squarespace? If so, how do I do this?

Answer 1

To answer your first question directly, yes it is possible either via a Code Block or via Code Injection. Essentially, you would be adding entirely new, custom code to your Squarespace website.

To answer your second question generally, it would be an entirely custom implementation -- that is, there is no block nor build-in feature in Squarespace that will help facilitate this functionality. Therefore "how you do it" would boil down to a good amount of custom code development (again, said generally).

To offer additional perspective: Consider that, on mobile, screen real-estate is more limited (and clickable-areas may become prohibitively small) and that overlaying interactive elements may require additional testing to ensure intended behavior across different mobile devices, operating systems, operating system versions and browsers. Considering these things ahead of time (or perhaps testing during the process) may lead you to reconsider the interactions and UI behavior overall (that is, to get away from multiple overlaying images and to a more vertically-friendly set of behaviors and interactions, just as one possible example).

Answer 2

In the old days we used image-map. It still works. With image-map you can draw a polygon which is a clickable link to another page (or trigger some javascript).

If you want it to scale nicely (in a responsive design) you would need some kind of plugin.

In it's simplest form the links would take the user to another page with another image-map or some other navigation pattern. Example

I guess it would be possible to do this in some custom code block in Squarespace, and just link to several other pages with images/image-maps or galleries.

There are tools out there that can help you draw the polygons (search for "image map generator") if you don't have Dreamweaver or similar.

Other methods: If you want it to scale without some plugin, you can use SVG instead of image-map. If you are ok with only rectangular hotspots, you can also try this site which uses CSS to replace image-map.

Here is an example using html and css only:

html, div, p, a {
  font-family: arial;
}
.map-image {
  display: inline-block;
  position: relative;
  overflow: hidden;
  padding: 0;
}
.map-image img {
  width: 100%;
  height: auto;
  display:block;
}
.map-image a {
  text-decoration: none;
  padding: 5px;
  color: #FFF;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
  margin: 0;
  font-size: 4vw;
}
.map-image a:hover {
  border: 1px solid #FFF;
  margin: -1px;
}

<div class="map-image">
  <img src="http://cdn.frooition.com/060129/images/100_1428.JPG">
  <a href="https://www.google.com" title="Front window" style="position: absolute; left: 24.4%; top: 17.5%; width: 33.3%; height: 25.39%; z-index: 99; background-color:rgba(255,0,0,0.3);">Google</a>
  <a href="https://www.facebook.com" title="Seats" style="position: absolute; left: 58%; top: 0.16%; width: 28.4%; height: 26.33%;  z-index: 99; background-color:rgba(0,255,255,0.2);">Facebook</a>
  <a href="https://www.linkedin.com/" title="Wheel" style="position: absolute; left: 45%; top: 57.68%; width: 19%; height: 39.34%; z-index: 99; background-color:rgba(0,255,0,0.2);">Linkedin</a>
</div>

(If you are a novice to coding, popup is probably not the right search term in this case. It is easier to link to other pages than to make everything "pop" on the same page.)