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".
|
| |
Collegamenti ipertestuali con effetti
Arretrati lista "Una demo Dhtml a settimana"
CONOSCENZE CONSIGLIATE PER QUESTO ARTICOLO: Html, Css, Javascript
COMPATIBILITÀ: Ms Ie
FILES ESTERNI: Nessuno
Visualizza la demo
Scarica la demo
Oggi vedremo un esempio di grande impatto estetico utilizzando
esclusivamente del testo, senza andare a richiamare alcuna immagine. L'unico
difetto purtroppo è l'esclusiva compatibilità con Ms Ie.
L'esempio potrebbe ad esempio essere inserito in una presentazione Html da
distribuire con i Cd Rom. In questo caso, sarebbe più comodo specificare il
browser.
Vediamo di analizzare quindi il sorgente:
<SCRIPT>
<!--
function correct(){
if (finished){
setTimeout("begin()",3000)
}
return true
}
window.onerror=correct
function begin(){
if (!document.all)
return
if (maxheight==null)
maxheight=temp.offsetHeight
whatsnew.style.height=maxheight
temp.style.display="none"
c=1
finished=true
change()
}
// -->
</SCRIPT>
In questo primo codice scripting, nulla va cambiato per la
personalizzazzione dell'esempio.
Continuando nell'esaminazione del sorgente, si trova:
<style>
<!--
#whatsnew a{color:004080;text-decoration:none; font-size:26px}
#whatsnew, #temp {font-weight:bold; font-family:Arial; font-size:26px}
#whatsnew a:hover{color:red;}
-->
</style>
Questo Style incorporato (si veda www.risorse.net/css) definisce le
caratteristiche estetiche dei link, impostando colore, dimensione e
grandezza del carattere.
Tutta la sintassi esaminata sin'ora deve essere inserita all'interno dei tags
<head></head>. Il <body> invece comincierà richiamando onload (gestore di
eventi. Per maggiori informazioni www.risorse.net/javascript):
<BODY onLoad="begin()">
Arrivati a questo punto, non manca altro che inserire i link che dovranno
apparire con l'effetto desiderato:
<script language="javascript1.2">
<!--
var head=''
var top=0
var maxheight
var finished=false
var tickers=new Array()
tickers[0]='<a href="http://www.risorse.net">http://www.risorse.net</a>'
tickers[1]='<a href="http://www.risorse.net/dhtml">200 demo Dynamic
Html</a>'
tickers[2]='<a href="http://www.risorse.net/css">Tutorial pratico sui
Css</a>'
tickers[3]='<a href="http://www.risorse.net/mailing">Tre Mailing list
gratuite</a>'
tickers[4]='<a href="http://www.risorse.net/xml">Corso di base su
Xml</a>'
E' qui che bisogna agire per sostituire i collegamenti ipertestuali. Lo
script prosegue impostando, tra le altre, il tipo di effetto da utilizzare e
i tempi di attesa:
for (i=1;i<=tickers.length-1;i++){
if (tickers[i].length>=tickers[top].length)
top=i
}
if (document.all)
document.write('<span id="whatsnew"
style="width:100%;height=10;filter:revealTrans(duration=2,transition=19)">'+tickers[0]+'</span>')
function change(){
whatsnew.innerHTML=''
whatsnew.filters.revealTrans.apply()
whatsnew.filters.revealTrans.play()
whatsnew.innerHTML=tickers[c]
if (c==tickers.length-1)
c=0
else
c+=1
setTimeout("change()",5000)
}
if (document.all)
document.write('<span id=ns style="display:none;">')
// -->
</script>
<!--Insert alternate HTML codes here
that will be seen by browsers OTHER
than IE 4.x-->
</span>
<span id=temp style="position:absolute;left:0;top:0" style=&{head};>
<script>
<!--
if (document.all){
temp.style.width=whatsnew.style.width
document.write(tickers[top])
}
// -->
</script>
</span>
Come avevamo anticipato, è possibile modificare il tipo di effetto tramite
la riga di codice:
style="width:100%;height=10;filter:revealTrans(duration=2,transition=19)"
dove 2 indica il numero di secondi dell'effetto e 19 il tipo di transizione.
In conclusione, sappiate che è possibile modificare i tempi di attesa tra
un link e l'altro, agendo su:
setTimeout("change()",5000)
|
