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 <MARQUEE> crossbrowser
Arretrati lista "Una demo Dhtml a settimana"
CONOSCENZE CONSIGLIATE PER QUESTO ARTICOLO: Html, Javascript
COMPATIBILITÀ: MsIe, Netscape
FILES ESTERNI: Nessuno
Visualizza la demo
Scarica la demo
Come molti sanno, le implementazioni di Html 4, sono state recepite dai due
browser, Netscape e Explorer, in modo molto differente; ciò, tra le altre
cose, ha comportato la nascita di tag proprietari come <marquee> e <blink>.
Questa non è la sede per approfondire le differenze di tag tra i due
browser, ma è l'ideale per mostrare come l'Html dinamico possa creare e
gestire testi scorrevoli in modalità crossbrowser, ossia compatibili con i
due più famosi navigatori.
La demo che andremo a descrivere questa settimana, crea lo stesso effetto
del tag <marquee> (notoriamente compatibile solo con Explorer) anche con
l'ex browser più diffuso al mondo.
Per avviare l'animazione in modo corretto, all'interno dei tag <head></head>
va inserito il codice seguente:
<script language="JavaScript1.2">
<!--
// Specifica la larghezza (in pixel) dello spazio del marquee
var marqueewidth=330
// Specifica l'altezza (in pixel) del marquee
var marqueeheight=20
// Specifica la velocità del marquee (più alto = più veloce)
var speed=6
// Specifica il contenuto del marquee
var marqueecontents='<font
face="Arial"><strong><big>Sezione Dynamic Html.
Tutto su Html dinamico: demo, mailing list e teoria.</big></strong></font>'
Questa porzione di codice è di vitale importanza per permettere la
personalizzazione della demo. Quindi, se si volesse adattare lo script alle
proprie eseigenze, si faccia attenzione ai commenti inseriti in italiano e
preceduti dai segni //.
Continuando nella visione del Javascript, ci si imbatte nelle seguenti
righe:
if (document.all)
document.write('<marquee scrollAmount='+speed+'
style="width:'+marqueewidth+'">'+marqueecontents+'</marquee>')
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers){
setTimeout("window.onresize=regenerate",450)
intializemarquee()
}
}
function intializemarquee(){
document.cmarquee01.document.cmarquee02.document.write('<nobr>'+marqueeconte
nts+'</nobr>')
document.cmarquee01.document.cmarquee02.document.close()
thelength=document.cmarquee01.document.cmarquee02.document.width
scrollit()
}
function scrollit(){
if (document.cmarquee01.document.cmarquee02.left>=thelength*(-1)){
document.cmarquee01.document.cmarquee02.left-=speed
setTimeout("scrollit()",100)
}
else{
document.cmarquee01.document.cmarquee02.left=marqueewidth
scrollit()
}
}
window.onload=regenerate2
// -->
</script>
<ilayer width=&{marqueewidth}; height=&{marqueeheight};
name="cmarquee01">
<layer name="cmarquee02"></layer>
</ilayer>
Queste istruzioni, sono fondamentali per il movimento del testo e, per
questo non devono essere modificate in nessuna parte.
|
