Boutons superposés
##################

L'exemple suivant présente des boutons superposés.

Ils sont ici rendu visibles, mais la couleur peut leur être enlevés dès que placés afin de les rendu invisible.

:download:`Télécharger l'exemple <boutons-superposes.zip>`

.. raw:: html

   <style>

   .animation {
      /* taille max et bordure */
      position: relative; /* ⚠️ */
   }

   .boutons-invisibles {
      position: absolute; /* ⚠️ */
      left: 0; /* ⚠️ */
      top: 0; /* ⚠️ */
      width: 100%; /* ⚠️ */
      height: 100%; /* ⚠️ */
      background: rgba(255,0,0,0.25); /* ⚠️ */
      z-index: 99; /* ⚠️ */
   }

   .bouton-invisible {
      position: absolute; /* ⚠️ */
   }

   .bouton-invisible:hover {
      cursor: pointer; /* ⚠️ */
   }

   .bouton-invisible--1 {
      left: 10%; /* ⚠️ */
      top: 10%; /* ⚠️ */
      width: 20%; /* ⚠️ */
      height: 30%; /* ⚠️ */
      background: rgba(0,255,0,0.25); /* ⚠️ à supprimer une fois le bouton placé au bon endroit */
   }

   .bouton-invisible--1:hover {
      background: rgba(0,255,0,0.5); /* ⚠️ à supprimer une fois le bouton placé au bon endroit */
      cursor: pointer; /* ⚠️ */
   }

   .bouton-invisible--2 {
      right: 10%; /* ⚠️ */
      bottom: 10%; /* ⚠️ */
      width: 30%; /* ⚠️ */
      height: 30%; /* ⚠️ */
      border-radius: 50%; /* bouton curculaire ⚠️ */
      background: rgba(0,0,255,0.25); /* ⚠️ à supprimer une fois le bouton placé au bon endroit */
   }

   .bouton-invisible--2:hover {
      background: rgba(0,0,255,0.5); /* ⚠️ à supprimer une fois le bouton placé au bon endroit */
   }

   </style>
   <div style="max-width:256px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGklEQVQYlWM4c+bMf3TMgA0MBYWDzDkUKQQAlHCpV9ycHeMAAAAASUVORK5CYII=) repeat;margin-bottom:2em;"  class="animation" id="mon-animation">

      <div class="boutons-invisibles">
         <div class="bouton-invisible bouton-invisible--1"></div>
         <div class="bouton-invisible bouton-invisible--2"></div>
      </div>
   </div>
   <script src="../../_static/lottie.min.js" charset="utf-8"></script>
   <script type="text/javascript">
   var animation = bodymovin.loadAnimation({
     container: document.getElementById('mon-animation'),
     path: '../../_static/animations/temps.json',
     renderer: 'svg',
     loop: true,
     autoplay: false,
   });

   // on sélectionne le bouton 1 grâce à sa classe 'bouton-invisible--1'
   // le point devant indique qu'il s'agit d'une classe
   var bouton_1 =  document.querySelector('.bouton-invisible--1');

   // idem bouton 2
   var bouton_2 = document.querySelector('.bouton-invisible--2');

   // on ajoute un écouteur d'événement sur le bouton 1
   bouton_1.addEventListener('click', function(){
      // qui met l'animation en pause
      animation.pause();
   })

   // idem
   bouton_2.addEventListener('click', function(){
      // qui met l'animation en lecture
      animation.play();
   })

   </script>

HTML
****

.. code-block:: html

   <div class="animation" id="mon-animation">
      <!-- début du code à observer -->
      <div class="boutons-invisibles">
         <div class="bouton-invisible bouton-invisible--1"></div>
         <div class="bouton-invisible bouton-invisible--2"></div>
      </div>
      <!-- fin du code à observer -->

   </div>

CSS
***

.. code-block:: css

   .animation {
      /* taille max et bordure */
      max-width: 512px;
      border: 1px dashed grey;
      position: relative; /* ⚠️ */
   }

   .boutons-invisibles {
      position: absolute; /* ⚠️ */
      left: 0; /* ⚠️ */
      top: 0; /* ⚠️ */
      width: 100%; /* ⚠️ */
      height: 100%; /* ⚠️ */
      background: rgba(255,0,0,0.25); /* ⚠️ */
      z-index: 99; /* ⚠️ */
   }

   .bouton-invisible {
      position: absolute; /* ⚠️ */
   }

   .bouton-invisible:hover {
      cursor: pointer; /* ⚠️ */
   }

   .bouton-invisible--1 {
      left: 10%; /* ⚠️ */
      top: 10%; /* ⚠️ */
      width: 20%; /* ⚠️ */
      height: 30%; /* ⚠️ */
      background: rgba(0,255,0,0.25); /* ⚠️ à supprimer une fois le bouton placé au bon endroit */
   }

   .bouton-invisible--1:hover {
      background: rgba(0,255,0,0.5); /* ⚠️ à supprimer une fois le bouton placé au bon endroit */
      cursor: pointer; /* ⚠️ */
   }

   .bouton-invisible--2 {
      right: 10%; /* ⚠️ */
      bottom: 10%; /* ⚠️ */
      width: 30%; /* ⚠️ */
      height: 30%; /* ⚠️ */
      border-radius: 50%; /* bouton curculaire ⚠️ */
      background: rgba(0,0,255,0.25); /* ⚠️ à supprimer une fois le bouton placé au bon endroit */
   }

   .bouton-invisible--2:hover {
      background: rgba(0,0,255,0.5); /* ⚠️ à supprimer une fois le bouton placé au bon endroit */
   }

JavaScript
**********

.. code-block:: javascript

   // on sélectionne le bouton 1 grâce à sa classe 'bouton-invisible--1'
   // le point devant indique qu'il s'agit d'une classe
   var bouton_1 =  document.querySelector('.bouton-invisible--1');

   // idem bouton 2
   var bouton_2 = document.querySelector('.bouton-invisible--2');

   // on ajoute un écouteur d'événement sur le bouton 1
   bouton_1.addEventListener('click', function(){
      // qui met l'animation en pause
      animation.pause();
   })

   // idem
   bouton_2.addEventListener('click', function(){
      // qui met l'animation en lecture
      animation.play();
   })