Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Pattern of irregular clickable shapes

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.

Random shaped interactive, clackable areas

like image 961
po10cySA Avatar asked Jun 01 '17 08:06

po10cySA


People also ask

How do you make a shape clickable in HTML?

The simplest way to make a portion of an SVG clickable is to add an SVG hyperlink element to the markup. This is as easy as wrapping the target with an <a> tag, just as you would a nested html element. Your <a> tag can surround a simple shape or more complex paths.

How do you make an image clickable in CSS?

In a webpage, after adding an image using the <img> tag, make it clickable by adding a <a> tag along with it.


2 Answers

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.

like image 129
web-tiki Avatar answered Sep 19 '22 03:09

web-tiki


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! :)

like image 31
Luca De Nardi Avatar answered Sep 18 '22 03:09

Luca De Nardi