Livello di difficoltà: |
|
Dynamic Html è una tecnologia approvata dal W3C per la creazione di siti Web dinamici ed interazioni client side con l'utente. In questa sezione sono disponibili centinaia di esempi ed arretrati della mailing list "Una demo Dhtml a settimana".
|
| |
Il tag <BLINK> crossbrowser
Arretrati lista "Una demo Dhtml a settimana"
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><blink> 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><blink> 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.
|
