Il tag <BLINK> crossbrowser

Arretrati lista "Una demo Dhtml a settimana"
di Risorse.net

CONOSCENZE CONSIGLIATE PER QUESTO ARTICOLO: Html, Javascript

COMPATIBILITÀ: Ms Ie, Netscape
FILES ESTERNI: Nessuno
Visualizza la demo
Scarica la demo

Quasi un mese fa, proprio in occasione della suddetta mailing list, presentammo una demo che permetteva di rendere compatibile il tag <marquee> (di Explorer) anche con Netscape. Parlammo anche di un suo pari, <blink> che al contrario, era proprietà di Netscape e non compatibile con l'altro browser.
Invitiamo, a proposito, a leggere l'arretrato all'indirizzo www.risorse.net/dhtml/teoria/maggio.
Ritornando invece al discorso appena accennato, <blink> è un tag che permette di rendere il testo a esso incluso lampeggiante. Questa sfiziosità è però negata agli utenti Microsoft, o almeno lo era.
Vediamo infatti come procedere all'interno dell'<head>:

<STYLE>
<!--
blink {color: red}
-->
</STYLE>

<SCRIPT>
<!--
function doBlink() {
    var blink = document.all.tags("BLINK")
    for (var i=0; i<blink.length; i++)
    blink[i].style.visibility = blink[i].style.visibility == "" ? "hidden" : ""
}

function startBlink() {
  if (document.all)
    setInterval("doBlink()",1000)
}
window.onload = startBlink;
// -->
</SCRIPT>

Dopo il semplice Css che serve a impostare lo stesso colore a tutti i <blink> (potete sia levarlo che modificarlo a piacere), ci si imbatte nel primo script, effettivamente semplice e suddiviso in tre parti principali che rispettivamente servono:

la funzione doblink (function doBlink), serve proprio per creare l'effetto lampeggiante. Da notare, che lo script è stato creato appositamente per Explorer. Netscape infatti si basa solo sul tag <blink> che troveremo e spiegheremo meglio più avanti. Per capire ciò, basta notare che si è usato document.all (non compatibile con Netscape, perché quest'ultimo gestisce document.layer, visto che Communicator supporta i layer e Explorer no) e, proprio per il fatto che il browser Microsoft non è compatibile con i layers, per disegnarne uno, si usano gli style (blink[i].style.visibility). Sempre all'interno di questa funzione, si trovano appunto gli style, prima visibili (visibility) e poi invisibili (hidden). Questo cambio continuo, crea l'effetto di un testo lampeggiante.

L'altra funzione, la startblink (function startBlink) è necessaria per avviare l'animazione e settare gli intervalli tra la comparsa/scomparsa della scritta. Il tempo, è modificabile, ed è in millisecondi. Se desideraste personalizzare tale periodo, la riga da prendere in considerazione è:

setInterval("doBlink()",1000)

Infine, il Javascript si chiude con:

window.onload = startBlink;

che è indispensabile per avviare l'effetto al caricamento del documento.

Una volta impostato lo script nell'<head>, basta inserire il tag <blink> nel <body>:

<h3>&lt;blink&gt; crossbrowser</h3>

Chi lo ha detto che blink sia solo per Netscape?<br><br>

Guarda con i tuoi occhi: <blink>Visto? Anche con Explorer</blink>


Quando si spiegava la funzione doblink, si diceva come Netscape non fosse compatibile con lo script, perche' si basava solo sul tag <blink>. Ciò è dimostrabile, inserendo le opportune modifiche alla demo:

<HTML>
<HEAD>

<STYLE>
<!--
h2 {color: red}
-->
</STYLE>

<SCRIPT>
<!--
// al posto di blink si mette
// un altro tag, in questo
// caso h2
function doBlink() {
    var blink = document.all.tags("H2")
    for (var i=0; i<H2.length; i++)
    H2[i].style.visibility = H2[i].style.visibility == "" ? "hidden" : ""
}

function startBlink() {
  if (document.all)
    setInterval("doBlink()",1000)
}
window.onload = startBlink;
// -->
</SCRIPT>

<BODY BGCOLOR=white>

<h3>&lt;blink&gt; crossbrowser</h3>

Chi lo ha detto che blink sia solo per Netscape?<br><br>

Guarda con i tuoi occhi: <h2>Visto? Anche con Explorer</h2>

</BODY>
</HTML>

In questo caso, non abbiamo fatto altro che impostare il Javascript in modo tale da rendere lampeggiante il tag <h2>, cosa che Netscape, non comprendendo tale script, non esegue. Le modifiche appena descritte, potrebbero comunque essere compatibili anche con Netscape, impostando per quest'ultimo l'accesso e il disegno dei layer, senza ricorrere agli style. Ma è senza dubbio più comodo impostare la demo come avevamo visto all'inizio.

© Risorse.net (www.risorse.net)
pagina in versione stampabile:
http://www.risorse.net /dhtml/teoria/1999/giugno/6.asp?print=ok