Структура нерегулярных фигур с кликами

Мне нужно создать шаблон многих не прямоугольных форм. Каждая форма должна быть интерактивной и показывать изображение при нажатии.
Запрос состоит в том, чтобы взять изображение витража и превратить его в веб-страницу, заполненную изображением. Каждая панель должна быть кликабельной, похожей на те, которые вы видите в церквях, но при первой загрузке каждая фигура черно-белая, а при щелчке она показывает цвет стекла.

Я предполагаю, что это решение будет включать в себя 2 части, цветную версию всего изображения с витражами и черно-белую версию на нем. Затем каким-то образом каждая маленькая стеклянная панель на клике должна скрывать черно-белую часть под ней, чтобы показать цветное изображение внизу.

Я понятия не имею, какое лучшее решение для этого было бы, и не нашел ничего полезного, чтобы помочь сделать что-то подобное с формами и такими случайными интерактивными областями. Я вставил пример ниже результата, представьте, что каждая стеклянная часть является кликабельной, а по щелчку отображается цвет.

Белые строки просто указывают, что каждая панель ведет себя независимо от других.

Ответ 1

Чтобы создать шаблон нерегулярных кликов-полигонов, вы можете использовать встроенный SVG с помощью

ссылка SVG <a> элемент
элемент polygon, чтобы сделать фигуры

Это позволит вам создать любую кликовую форму и сделать их отзывчивыми.

Вот пример того, что вы можете сделать с зависанием и фокусом, чтобы сделать фигуры интерактивными:

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>

Ответ 2

Карты области изображений могут вам определенно помочь.

Взгляните на этот сайт, что очень удобно для этого!

Пример

<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>

В принципе, вы можете назначать разные области с разными ссылками для частей ваших изображений. Это проще сделать, а не объяснять это!:)

Ответ 3

Это долгая работа, но это может вам помочь: 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.stack.imgur.com/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>

Ответ 4

Кажется, что вы ищете <map> - tag.

~~Это только создает прямоугольные области, на которые нужно щелкнуть.~~ Однако вы можете использовать методы javascript onclick, чтобы проверить, находится ли мышь в определенной области. Таким образом, вы также можете проверить круглые области, треугольные области или в основном область любой формы.