Blinkende skrift med HTML



Fremhævelse af skrift med blinkende typer

Blinkende tekst er en af de typer tekstdekoration man generelt fraråder at anvende. Ligesom pangfarver og hoppende animationer der virker forstyrrende på læsningen af siden, betragtes dette som en pornoeffekt. Man skal også være opmærksom på, at blinkende tekst ikke understøttes af alle browsertyper.

Blinkende tekst kan pt. laves på to måder med HTML, og ingen af dem fungerer reelt til hjemmesider, fordi de kun fungerer på nogle få browsere:

Den første er STYLE="text-decoration: blink". Style skal være lagt på en tag til tekstafsnit som f.eks. <P>, <DIV> og <SPAN>. Som man normalt bruger tekstdekorationer i en tekst vil <SPAN> sædvanligvis være en god løsning, fordi den ikke tilfører tekststrengen andre formateringer.

Et stykke tekst med blinkende tekst vil som kode se således ud:

Her er der normal tekst, <SPAN STYLE="text-decoration:blink">her blinker teksten, hvis browseren understøtter dette,</SPAN> og her bliver den normal igen.


På siden, når den vises, ser det således ud:

Her er der normal tekst, her blinker teksten, hvis browseren understøtter dette, og her bliver den normal igen.



Den anden er tag'en <BLINK>. Den anvendes ligesom alle andre tags med en start- og slut-tag.

Et stykke tekst med blinkende tekst vil som kode se således ud:

Her er der normal tekst, <BLINK>her blinker teksten, hvis browseren understøtter dette,</BLINK> og her bliver den normal igen.


På siden, når den vises, ser det således ud:

Her er der normal tekst, her blinker teksten, hvis browseren understøtter dette, og her bliver den normal igen.


Workaround til blinkende tekst (der fungerer)

Hvis man endelig vil have blinkende tekst, og det skal fungere er der to gængse fremgangsmåder:
  1. En animeret gif, dvs. teksten laves om til et billede, som sættes ind med tag'en IMG. Dette kan man se hvordan man gør under billeder
  2. Et JavaScript der definerer en ny tag
Lad os se nærmere på JavaScriptet. Det er muligt at lave vores eget element, dette kalder vi JavaBlink, og det ser ud som en almindelig tag, når man skriver det, dvs. <JavaBlink>Blinkende tekst her</JavaBlink>. Til dette laver vi en funktion, som vi også kalder JavaBlink. Element og funktion behøver ikke hedde det samme, men lige til dette formål er det praktisk.

Scriptet ser således ud:

<SCRIPT type="text/javascript">
  function JavaBlink() {
     var blinks = document.getElementsByTagName('JavaBlink');
     for (var i = blinks.length - 1; i >= 0; i--) {
        var s = blinks[i];
        s.style.visibility = (s.style.visibility === 'visible') ? 'hidden' : 'visible';
     }
     window.setTimeout(JavaBlink, 1000);
  }
  if (document.addEventListener) document.addEventListener("DOMContentLoaded", JavaBlink, false);
  else if (window.addEventListener) window.addEventListener("load", JavaBlink, false);
  else if (window.attachEvent) window.attachEvent("onload", JavaBlink);
  else window.onload = JavaBlink;
</SCRIPT>


Scriptet skal placeret et sted på siden, før tag'en, eller evt. kaldes som et eksternt script. Vi kan nu bruge vores nye tag således:

Her er der normal tekst, <JavaBlink>her blinker teksten med JavaScriptet,</JavaBlink> og her bliver den normal igen.


På skærmen kommer det nu til at se således ud:

Her er der normal tekst, her blinker teksten med JavaScriptet, og her bliver den normal igen.


Scriptet har den fordel, at man kan styre hastigheden hvormed teksten blinker på window.setTimeout, ved at sætte den til noget andet end 1000, f.eks.

Her blinker teksten med tiden sat til 500


Her blinker teksten med tiden sat til 1000


Her blinker teksten med tiden sat til 3000


Man kan nu lege med hvor hurtigt man vil have teksten, eller hvad man nu har i sin tag, til at blinke.