Motif de formes irrégulières cliquables

Question

J'ai besoin de faire un modèle de de nombreuses formes non rectangulaires . Chaque forme doit être interactive et révéler une image au clic.
La demande est de prendre une image d'un vitrail et de la transformer en une page web remplie de cette image. Chaque panneau doit être cliquable semblables à celles que l'on voit dans les églises, mais au premier chargement, chaque forme est en noir et blanc et, en cliquant, elle révèle la couleur du verre.

J'imagine que cette solution comprendra 2 parties, la version couleur de l'ensemble du vitrail et une version noir et blanc par-dessus. Ensuite, d'une manière ou d'une autre, chaque petit panneau de verre sur le clic doit cacher la partie en noir et blanc en dessous pour révéler l'image en couleur en dessous.

Je n'ai aucune idée de la meilleure solution à adopter et je n'ai rien trouvé d'utile pour m'aider à faire quelque chose de similaire avec des formes et des zones interactives aléatoires . J'ai inséré ci-dessous un exemple du résultat, imaginez que chaque portion de verre est cliquable et que le clic révèle la couleur.

Les lignes blanches indiquent simplement que chaque volet se comporte indépendamment des autres.

Answer 1

Pour faire un motif de polygones cliquables irréguliers vous pouvez utiliser la fonction inline SVG avec :

• el SVG enlace <a> élément
• el élément de polygone pour réaliser les formes

Il vous permettra de concevoir n'importe quel forme cliquable et les rendre réactifs.

Voici un exemple de ce que vous pouvez faire avec un état de survol et de focus pour rendre les formes interactives :

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>

L'élément polygone n'autorise que les polygones. Si vous souhaitez réaliser des formes courbes, vous devrez utiliser l'élément chemin élément avec commandes de courbes .

Answer 2

Les cartes de la zone d'image peuvent certainement vous aider.

Jetez un coup d'œil à ce qui est un outil très pratique pour cela !

Exemple

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

En fait, vous pouvez attribuer des zones différentes, avec des liens différents, à certaines parties de vos images. C'est plus facile de le faire plutôt que de l'expliquer ! :)

Answer 3

C'est un long travail, mais, cela pourrait vous aider : 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>

Answer 4

On dirait que vous cherchez le <map> - étiquette .

Cependant, cela ne crée que des zones rectangulaires sur lesquelles cliquer. Vous pouvez toutefois utiliser les méthodes onclick de javascript pour vérifier si la souris se trouve dans une certaine zone. De cette façon, vous pouvez également vérifier les zones circulaires, les zones triangulaires ou, en gros, une zone de n'importe quelle forme.