Risorse per webmaster

L A   C O M U N I T À   V I R T U A L E   I T A L I A N A   P E R   W E B   M A S T E R S

 
 
      Tecnologie
      HTML
      CSS
      DHTML
      FLASH
      ASP
      PHP
      JSP
      PERL
      XML
      SMIL
      WIRELESS
      PALMARI
      APACHE
      MYSQL
      PICOSQL
 
      Grafica
 
      Servizi
 
      Raccolte
 
      Recensioni
 
      Analisi
 
      Disclaimer

   Per tutti
 
  .: Magazine
  .: Editor
  .: Appunti
  .: Gratis
  .: Scripts
  .: Components
 
   Home page

Partner
Comunicati stampa
Proposte di viaggio
Prenotazione hotel
Prenota vacanze
Accessori palmari
Cerca alberghi
Guide turistiche

versione stampabile Mostra una versione adatta per la stampa  

Livello di difficoltà:Livello di difficoltà: medio  
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)
 

 
 
Home > dhtml > teoria > 1999 > novembre > ...   © 1999-2017 Risorse.net, tutti i diritti riservati