Pattern of irregular clickable shapes

Question

I need to make a pattern of many non rectangular shapes. Each shape must be interactive and reveal an image on click.
The request is to take an image of a stained glass and turn it into a webpage that is filled with the image. Each pane must be clickable, similar to those you see in churches, but on first load each shape is black and white and on click it reveals the color of the glass.

I imagine that this solution will encompass 2 parts, the color version of the entire stained glass image and a black and white version ontop of it. Then somehow each little glass pane on click needs to hide the black and white portion underneath it to reveal the color image underneath.

I have no idea what the best solution to go about this would be and haven't found anything useful to help along the way of doing something similar with shapes and so random interactive areas. I have inserted an example below of the outcome, imagine each glass portion is clickable and on click reveals the color.

The white lines just designates that each pane behaves independently of the others.

Answer 1

To make a pattern of irregular clickable polygons, you can use inline SVG with:

• the SVG link <a> element
• the polygon element to make the shapes

It will allow you to design any clickable shape and make them responsive.

Here is an example of what you can do with a hovered and focus state to make the shapes interactive:

svg {
  display:block;
  width:40%; height:auto;
  margin:0 auto;
}
polygon {  
  fill:#ccc;
  stroke:#fff; stroke-width:0.3;
  transition: fill .15s;
}
a:hover .teal { fill:teal; }
a:hover .pink { fill:pink; }
a:focus .teal, 
a:focus .pink { fill:orange; }

<svg viewbox="0 0 20 19">
  <a xlink:href="#"><polygon class="teal" points="0 0 10 5 8 10 0 5" /></a>
  <a xlink:href="#"><polygon class="pink" points="0 0 10 5 15 0" /></a>
  <a xlink:href="#"><polygon class="teal" points="0 5 8 10 0 15" /></a>
  <a xlink:href="#"><polygon class="teal" points="15 0 10 5 20 19" /></a>
  <a xlink:href="#"><polygon class="pink" points="20 19 10 5 8 10" /></a>
  <a xlink:href="#"><polygon class="teal" points="20 19 8 10 0 15 8 13" /></a>
  <a xlink:href="#"><polygon class="pink" points="20 19 0 19 0 15 8 13" /></a>
  <a xlink:href="#"><polygon class="pink" points="15 0 20 19 20 20 20 0" /></a>
  <a xlink:href="#"><polygon class="teal" points="20 17 18 16 16 17 17 20 20 20" /></a>
</svg>

The polygon element only allows polygons. If you aim to make curved shapes, you will need to use the path element with curve commands.

Answer 2

Image area maps can certainly help you.

Take a look at this website, which is a very handy tool for this!

Example

<img src="url/to/your/image.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
    <area alt="" title="" href="LINK1" shape="poly" coords="380,163,448,127,515,163,457,205" />
    <area alt="" title="" href="LINK2" shape="poly" coords="140,13,48,1,55,13,47,12" />
</map>

Basically, you can assign different areas, with different links, for parts of your images. It's easier to do it rather than explaining it! :)

Answer 3

it is a long job, but, this could help you: http://imagemap-generator.dariodomi.de/

function helloWorld(area) {
  console.log('You\'ve clicked the right part') 
}

#container { position: relative; }
#info { 
  position: absolute;
  bottom: 90px;
  left: 85px;
  background: yellow;
  display: inline-block;
}

<section id="container">
<img src="https://i.sstatic.net/4KmlR.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
    <area alt="" title="" href="javascript:helloWorld()" shape="poly" coords="66,282,73,284,79,303,78,320,49,328,48,317" />
    [...]
</map>

<span id="info">&lt;== click here</span>
</section>

Answer 4

It seems like you are looking for the <map>-tag.

This only creates rectangular areas to click on, though. You can, however, use javascript's onclick methods to check whether the mouse is in a certain area. This way, you can also check for circular areas, triangular areas or basically an area of any shape.