web-dev-qa-db-fra.com

Motif de formes cliquables irrégulières

J'ai besoin de créer un motif de de nombreuses formes non rectangulaires . Chaque forme doit être interactive et révéler une image en un clic.
La demande consiste à prendre une image d'un vitrail et à la transformer en une page Web remplie de l'image. Chaque volet doit être cliquable , similaire à ceux que vous voyez dans les églises, mais au premier chargement, chaque forme est en noir et blanc et au clic, elle révèle la couleur de le verre.

J'imagine que cette solution comprendra 2 parties, la version couleur de l'image entière du vitrail et une version noir et blanc sur le dessus. Ensuite, en quelque sorte, chaque petite vitre sur clic doit masquer la partie noire et blanche en dessous pour révéler l'image couleur en dessous.

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

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

Random shaped interactive, clackable areas

javascripthtmlcsscss3svg
42
po10cySA

Pour créer un motif de polygones cliquables irréguliers , vous pouvez utiliser inline [~ # ~] svg [~ # ~] = avec:

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

Voici un exemple de ce que vous pouvez faire avec un état survolé et 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 autorise uniquement les polygones. Si vous souhaitez créer des formes courbes, vous devrez utiliser l'élément chemin avec commandes de courbe .

86
web-tiki

Les cartes des zones d'images peuvent certainement vous aider.

Jetez un oeil à this site Web, 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>

Fondamentalement, vous pouvez attribuer différentes zones, avec différents liens, pour des parties de vos images. C'est plus facile de le faire que de l'expliquer! :)

9
Luca De Nardi

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

Il semble que vous recherchiez le <map>- tag .

Cependant, cela ne crée que des zones rectangulaires sur lesquelles cliquer. Vous pouvez cependant 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 rechercher des zones circulaires, des zones triangulaires ou essentiellement une zone de n'importe quelle forme.

0
StuntHacks