Collegamenti ipertestuali con effetti

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

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)

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