Sensible des spots d'image avec des effets de survol

Question 1

J'ai tout un défi ici!

Designer envoyé cette lumiere de l'arbre qui ont des taches de lumière que la souris passe dessus devrait afficher un menu lien vers une page dans le site web. Non seulement que, sur le vol stationnaire, une superposition devrait être activé changer la teinte de l'ensemble du site (une sorte de charbonné avec la réduction de l'opacité)

La question que je me pose, c'est que je ne sais vraiment pas où commencer! J'ai pensé mettre en œuvre une sorte d'image de la carte, mais alors je ne sais pas comment le configurer sensible et il est vraiment difficile pour moi de penser à une solution pour ce défi.

Comme vous pouvez le voir dans les captures d'écran, l'arbre de lumière doit être comme en-tête arrière-plan et les taches doivent être positionnés sur certaines parties de l'arbre.

De l'aide sera vraiment apprécié

Question 2

Cela pourrait être un point de départ pour vous. Tant que vous connaissez votre taille de l'image, qui dans votre cas a été 914x913...vous pouvez simplement utiliser position: absolute; et les pixels de la gauche, à droite, en haut, en bas, selon l'endroit où vous voulez...et c'est juste une question de mesure (un petit essai et d'erreur de trop). Voir l'extrait de code...j'ai créé deux "points chauds" pour la prise en main (souligné en rouge). Et la boîte qui s'affiche lorsque vous renversement de là, vous pouvez jouer avec le positionnement et, évidemment, de style mieux que d'une boîte simple. Par ailleurs, l' <span></span> est nécessaire pour permettre le "hotspot" pour être séparée autrement la lueur va faire des choses bizarres avec votre image d'arrière-plan. Oh, et si vous prévoyez d'avoir ce soutien de plus petites fenêtres, vous devrez ajouter des requêtes de média pour chaque pour ajuster la position de chaque point d'accès.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
  <title>Test</title>

  <style>
    body {
      font-family: sans-serif;
      color: white;
    }

    .container {
      background-image: url('https://i.stack.imgur.com/lzxlC.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      display: flex;
      width: 914px;
      height: 913px;
      margin: 0 auto;
      position: relative;

    }


    /* SPOT 1  */
    .spot-1 {
      position: absolute;
      left: 323px;
      top: 148px;
    }

    .spot-1 span {
      border: 3px solid #FF6F6F;
      border-radius: 50px;
      height: 30px;
      width: 30px;
      display: flex;
      align-self: center;
    }

    .spot-1:hover span {
      box-shadow: 0 0 60px 30px #fff, 0 0 140px 90px #009EAB;
      animation: fadeIn 1s linear;
    }

    .box-1 {
      display: none;
    }

    .spot-1:hover .box-1 {
      display: flex;
      width: 80px;
      height: 25px;
      background: black;
      color: white;
      position: relative;
      left: 50px;
      padding: 12px;
      font-size: 10px;
    }




    /* SPOT 2  */
    .spot-2 {
      position: absolute;
      left: 515px;
      top: 163px;
    }

    .spot-2 span {
      border: 3px solid #FF3F3F;
      border-radius: 50px;
      height: 30px;
      width: 30px;
      display: flex;
      align-self: center;
    }

    .spot-2:hover span {
      box-shadow: 0 0 60px 30px #fff, 0 0 140px 90px #009EAB;
      animation: fadeIn 1s linear;
    }

    .box-2 {
      display: none;
    }

    .spot-2:hover .box-2 {
      display: flex;
      width: 80px;
      height: 25px;
      background: black;
      color: white;
      position: relative;
      left: 50px;
      padding: 12px;
      font-size: 10px;
    }


    @keyframes fadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="spot-1"><span></span>
      <div class="box-1">HOWDY!</div>
    </div>

    <div class="spot-2"><span></span>
      <div class="box-2">HI</div>
    </div>

  </div>

</body>

</html>

Authentic Science · Answer 1 · 2021-11-24T00:41:23

Cela pourrait être un point de départ pour vous. Tant que vous connaissez votre taille de l'image, qui dans votre cas a été 914x913...vous pouvez simplement utiliser position: absolute; et les pixels de la gauche, à droite, en haut, en bas, selon l'endroit où vous voulez...et c'est juste une question de mesure (un petit essai et d'erreur de trop). Voir l'extrait de code...j'ai créé deux "points chauds" pour la prise en main (souligné en rouge). Et la boîte qui s'affiche lorsque vous renversement de là, vous pouvez jouer avec le positionnement et, évidemment, de style mieux que d'une boîte simple. Par ailleurs, l' <span></span> est nécessaire pour permettre le "hotspot" pour être séparée autrement la lueur va faire des choses bizarres avec votre image d'arrière-plan. Oh, et si vous prévoyez d'avoir ce soutien de plus petites fenêtres, vous devrez ajouter des requêtes de média pour chaque pour ajuster la position de chaque point d'accès.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
  <title>Test</title>

  <style>
    body {
      font-family: sans-serif;
      color: white;
    }

    .container {
      background-image: url('https://i.stack.imgur.com/lzxlC.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      display: flex;
      width: 914px;
      height: 913px;
      margin: 0 auto;
      position: relative;

    }


    /* SPOT 1  */
    .spot-1 {
      position: absolute;
      left: 323px;
      top: 148px;
    }

    .spot-1 span {
      border: 3px solid #FF6F6F;
      border-radius: 50px;
      height: 30px;
      width: 30px;
      display: flex;
      align-self: center;
    }

    .spot-1:hover span {
      box-shadow: 0 0 60px 30px #fff, 0 0 140px 90px #009EAB;
      animation: fadeIn 1s linear;
    }

    .box-1 {
      display: none;
    }

    .spot-1:hover .box-1 {
      display: flex;
      width: 80px;
      height: 25px;
      background: black;
      color: white;
      position: relative;
      left: 50px;
      padding: 12px;
      font-size: 10px;
    }




    /* SPOT 2  */
    .spot-2 {
      position: absolute;
      left: 515px;
      top: 163px;
    }

    .spot-2 span {
      border: 3px solid #FF3F3F;
      border-radius: 50px;
      height: 30px;
      width: 30px;
      display: flex;
      align-self: center;
    }

    .spot-2:hover span {
      box-shadow: 0 0 60px 30px #fff, 0 0 140px 90px #009EAB;
      animation: fadeIn 1s linear;
    }

    .box-2 {
      display: none;
    }

    .spot-2:hover .box-2 {
      display: flex;
      width: 80px;
      height: 25px;
      background: black;
      color: white;
      position: relative;
      left: 50px;
      padding: 12px;
      font-size: 10px;
    }


    @keyframes fadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="spot-1"><span></span>
      <div class="box-1">HOWDY!</div>
    </div>

    <div class="spot-2"><span></span>
      <div class="box-2">HI</div>
    </div>

  </div>

</body>

</html>

Sensible des spots d'image avec des effets de survol

La question

La meilleure réponse

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie