Patrón de forms irregulares clicables

Necesito hacer un patrón de muchas forms no rectangulares . Cada forma debe ser interactiva y revelar una image onclick.
La request es tomar una image de una vidriera y convertirla en una página web que se llena con la image. Se debe poder hacer clic en cada panel, similar a los que se ven en las iglesias, pero en la primera carga cada forma es en blanco y negro y onclick se revela el color del vidrio.

Imagino que esta solución abarcará 2 partes, la versión en color de toda la image del vitral y una versión en blanco y negro en la parte superior. Entonces, de alguna manera, cada pequeño panel de vidrio onclick debe ocultar la parte en blanco y negro debajo de él para revelar la image en color que se encuentra debajo.

No tengo idea de cuál sería la mejor solución para hacer esto y no he encontrado nada útil para ayudar en el path de hacer algo similar con forms y áreas interactivas aleatorias . He insertado un ejemplo a continuación del resultado, imagine que se puede hacer clic en cada parte de vidrio y onclick se revela el color.

Las líneas blancas solo indican que cada panel se comporta independientemente de los demás.

Zonas interactivas, cladificables de forma aleatoria

Para hacer un patrón de polígonos irregulares que se pueden cliquear , puede usar SVG en línea con:

  • el elemento SVG link <a>
  • el elemento poligonal para hacer las forms

Le permitirá diseñar cualquier forma clicable y hacer que respondan.

Aquí hay un ejemplo de lo que puede hacer con un estado de enfoque y centrado para que las forms sean interactivas:

 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> 

Los maps de área de image sin duda te pueden ayudar.

¡Echa un vistazo a este website, que es una herramienta muy útil para esto!

Ejemplo

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

Básicamente, puede asignar diferentes áreas, con diferentes enlaces, para partes de sus imágenes. ¡Es más fácil hacerlo en lugar de explicarlo! 🙂

es un trabajo largo, pero esto podría ayudarlo: http://imagemp-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="http://img.javascriptes.com/javascript/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> 

Parece que estás buscando la label <map> .

Sin embargo, esto solo crea áreas rectangulares para hacer clic. Sin embargo, puede usar los methods onclick de javascript para verificar si el mouse está en un área determinada. De esta manera, también puede verificar áreas circulares, áreas triangulares o básicamente un área de cualquier forma.