Tag HTML <blink>

Le tag <blink> est un élément non standard utilisé pour créer un texte inclus, qui clignote lentement. L'effet de clignotement est très rarement utilisé, car il est très gênant pour les utilisateurs de regarder un texte constamment allumé et éteint.

Le tag <blink> est obsolète. Bien que certains navigateurs puissent toujours le prendre en charge, il est en train d'être supprimé. N'utilisez pas cet élément, sinon vos pages pourraient être brisées.

Syntaxe

Le tag <blink> est apparié, l’élément fermant (</blink>) est requis.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <h1>L'élément &lt;blink&gt;</h1>
    <blink>L'élément &lt;blink&gt; est obsolète. Pour obtenir un effet clignotant, vous devez utiliser CSS ou JavaScript. Voir des exemples dans la section suivante.</blink>
  </body>
</html>

Résultat

Effet clignotant à l'aide de CSS

Pour obtenir un effet clignotant, vous pouvez utiliser la propriété CSS3 animation définie par le règle @keyframes

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      blink {
        animation: blinker 0.6s linear infinite;
        color: #1c87c9;
       }
      @keyframes blinker {  
        50% { opacity: 0; }
       }
       .blink-one {
         animation: blinker-one 1s linear infinite;
       }
       @keyframes blinker-one {  
         0% { opacity: 0; }
       }
       .blink-two {
         animation: blinker-two 1.4s linear infinite;
       }
       @keyframes blinker-two {  
         100% { opacity: 0; }
       }
    </style>
  </head>
  <body>
    <h3>
      <blink>Texte clignotant</blink>
    </h3>
    <span class="blink-one">CSS blinking effect for opacity starting with 0%</span>
    <p class="blink-two">CSS blinking effect for opacity starting with 100%</p>
  </body>
</html>

Le texte de l'exemple donné s'estompe puis s'affiche à nouveau. Vous pouvez jouer avec le code CSS pour changer l'apparence du texte clignotant.

Effet clignotant à l'aide de JavaScript

Vous pouvez également utiliser des scripts pour faire clignoter l'élément.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <script type="text/javascript">
      function blink() {
        var blinks = document.getElementsByTagName('blink');
        for (var i = blinks.length - 1; i >= 0; i--) {
          var s = blinks[i];
          s.style.visibility = (s.style.visibility === 'visible') ? 'hidden' : 'visible';
        }
        window.setTimeout(blink, 1000);
      }
      if (document.addEventListener) document.addEventListener("DOMContentLoaded", blink, false);
      else if (window.addEventListener) window.addEventListener("load", blink, false);
      else if (window.attachEvent) window.attachEvent("onload", blink);
      else window.onload = blink;
    </script>
    <blink style="color: #1c87c9;">Effet clignotant avec JavaScript</blink>
  </body>
</html>

Dans l'exemple mentionné ci-dessus, le script est configuré pour masquer le texte lorsqu'il apparaît et le faire apparaître lorsqu'il disparaît, permettant ainsi d'obtenir un effet clignotant.


Support de Navigateurs



Trouvez-vous cela utile?

Articles Associées