tecnica.gif (746 byte) Tecnica.jpg (9372 byte)Massimiliano Valente (mvalente@tecnet.it)

 

Effetti Dhtml per Internet Explorer

Massimiliano Valente - mvalente@tecnet.it

 

Microsoft Internet Explorer mostra un'evidente superiorità rispetto a Netscape Communicator per quanto concerne i rapporti con Html dinamico. Già dalla versione 4 MSIE implementa alcuni effetti proprietari su elementi della pagina, facili da ottenere e poco dispendiosi in termini di risorse. In questo articolo vi mostreremo i più interessanti

Per ciò che riguarda l'approccio nei confronti di Dhtml, Internet Explorer ha fornito, già a partire dalla quarta versione, un modello a oggetti innovativo. La filosofia sulla quale poggia il Document Object Model di Html dinamico in generale, e di MSIE in particolare, è di rendere accessibile ogni elemento della pagina anche dopo il suo completo caricamento. In altre parole Html dinamico rende disponibile un'Application Programming Interface (API) per la gestione dei documenti che non si limita a leggere una pagina Html come semplice file di testo, ma tiene traccia di ogni elemento presente nella stessa. Questo approccio rende così possibile la modifica di ogni elemento della pagina anche dopo il suo caricamento, mentre l'uso di semplici linguaggi di scripting permette effetti simili solo con il refresh del documento.
Gli sviluppatori di Netscape, al contrario, nella realizzazione di Communicator 4 hanno implementato un DOM scarsamente innovativo.
Ciò che ci interessa sottolineare in questa sede è il fatto che spesso ottenere un effetto dinamico su un documento impone decine di righe di codice, mentre grazie alle opzioni implementate di default da Internet Explorer è possibile ottenere lo stesso risultato con poche e sintetiche righe.

Finestra a tutto schermo

L'esempio che segue simula il classico bottone "Schermo intero" di MSIE4 presente nella barra di navigazione superiore. Cliccando sul pulsante "Finestra a schermo intero" a centro pagina spariranno tutti gli elementi grafici del browser (pulsanti standard, barra degli indirizzi, collegamenti e barra di stato)

<script>
<!--
function fullwin(){
window.open("esempio01.htm","","fullscreen,scrollbars")
}
//-->
</script>
<form>
<input type="button" onClick="fullwin()" value="FINESTRA A TUTTO SCHERMO">
</form>

Il file "esempio01.htm" che abbiamo inserito nel Cd-Rom allegato richiama il documento da visualizzare a tutto schermo.
Abbiamo posizionato a centro pagina il classico bottone "a tutto schermo" della barra di navigazione. Cambia la posizione, ma gli effetti sono gli stessi

Aggiungi a Preferiti

L'opzione "Aggiungi a Preferiti" di MSIE è di strategica importanza per un sito Web che voglia essere visitato con una certa frequenza. Grazie a poche righe di codice è possibile creare un link capace di attivare questa opzione:

<HEAD>

<script language="JavaScript1.2">
var bookmarkurl="http://inews.tecnet.it"
var bookmarktitle="Internet News"

function addbookmark(){
if (document.all)
window.external.AddFavorite(bookmarkurl,bookmarktitle)
}
</script>

</HEAD>

<BODY>

<a href="javascript:addbookmark()">Aggiungi a Preferiti</a>

</BODY>

Cliccando sulla frase a centro pagina si apre automaticamente la maschera di Internet Explorer che permette di inserire un sito nel proprio elenco dei Preferiti

Apertura frame degli Active Channel

La tecnologia push ha deluso le speranze di chi ha creduto nelle sue potenzialità. Lanciata con molta enfasi nella versione 4, la gestione degli Active Channel è stata relegata a ruolo secondario nell'ultima release di Internet Explorer. Esistono tuttavia ancora molti siti che utilizzano i canali attivi e in questi casi può tornare utile l'esempio che mostra come visualizzare dal documento Html la lista dei canali sottoscritti:

<script>
<!--
function channel(){
window.open("esempio03.htm","","channelmode,scrollbars")
}
//-->
</script>
<form>
<input type="button" onClick="channel()" value="Apri canali">
</form>

 

Filtri su immagini

Gli elementi grafici di un ipertesto sono fondamentali per l'efficacia estetica, ma allo stesso tempo rappresentano una minaccia alla navigabilità di un sito Web. È abbastanza frequente, infatti, imbattersi in siti lentissimi a causa immagini troppo "pesanti" in termini di kB. Per ovviare a questa eventualità, i fogli di stile consentono di l'inserimento di semplice codice Html al posto di Gif animate. Gli effetti che si possono ottenere grazie ai filtri sono sei e tutti si verificano quando il puntatore del mouse passa sull'immagine:
Trasparency: rende opaca l'immagine finché il mouse non la sfiora restituendole l'originale luminosità.

Blur: effetto sfuocato dell'immagine verso sinistra.

Light: effetto ombreggiato dell'immagine da destra verso sinistra.

Wave: effetto ondulato sull'immagine.

Flip horizontal: immagine invertita verso sinistra.

Flip vertical: immagine capovolta.

Ho riunito in questa immagine tutti gli effetti sopracitati: va quindi associato il nome dell'effetto alla rispettiva immagine
Per ottenere gli effetti dei filtri sull'immagine è necessario agire su due punti del documento. Tra i tag <HEAD> va inserito il seguente codice:

<SCRIPT>
function alphaon(x)
{document[x].filters.alpha.opacity +=50;}

function alphaoff(x){
test=x
provatimer=setInterval("prova(test)", 100)}

function prova(x){
if(document[x].filters.alpha.opacity>50){
document[x].filters.alpha.opacity -= 10
}
else{clearInterval(provatimer)}
}

</script>

Tale codice si riferisce solo al primo effetto (trasparency) elencato in precedenza. Per gli altri effetti rimandiamo al Cd-Rom allegato alla rivista.
Dopo aver Impostato filtri e funzioni è necessario agire sulle singole immagini attraverso l'inserimento di codice nel tag IMG:

<IMG name="immagine1" SRC="staticlogo.gif" BORDER=0 STYLE="filter: alpha(opacity=50)" onmouseover="alphaon('immagine1')" onmouseout="alphaoff('immagine1')">

All'immagine "staticlogo.gif" viene assegnato un nome "immagine1" e un livello di opacità (il grado di visibilità dell'immagine all'atto del caricamento della pagina) pari a 50. A livelli più bassi corrisponde un'immagine più sfocata. Il gestore di eventi onmouseover stabilisce che nel momento in cui il puntatore del mouse entra nell'area di immagine questa divenga nitida; mentre il gestore onmouseout fa tornare l'immagine allo stato iniziale quando il puntatore si sposta.
L'inserimento di codice nell'immagine va ripetuto per ogni funzione impostata in precedenza. Per una dimostrazione pratica si rimanda ancora agli esempi del Cd-Rom allegato.
Effetti speciali in pagina
Le "transizioni di pagina" consentono di visualizzare effetti simili ad alcuni cambi immagine televisivi. In altre parole, la pagina richiamata prima di essere visualizzata viene preceduta da effetti di varia natura.
Le transizioni si attivano esclusivamente quando si accede alla pagina da un altro documento. Quindi, premendo il tasto "Aggiorna" del browser, non si avrà alcun effetto.
Gli effetti di transizioni possono essere in entrata Page-Enter o in uscita Page-Exit di pagina.
Il codice va inserito tra i tag <HEAD> e consente 23 diversi effetti (anche in questo caso gli esempi sono stati inseriti nel Cd-Rom di questo numero):

Box in
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=0)"> 

Box out
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=1)">

Circle in 
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=2)">

Circle out 
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=3)">

Wipe up 
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=4)">

Wipe down 
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=5)">

Wipe right 
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=6)">

Wipe left 
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=7)">

Vertical blinds
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=8)">

Horizontal blinds 
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=9)">

Checkerboard across
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=10)">

Checkerboard down 
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=11)">

Random dissolve 
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=12)">

Split vertical in 
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=13)">

Split vertical out
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=14)">

Split horizontal in 
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=15)">

Split horizontal out
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=16)">

Strips left down 
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=17)">

Strips left up 
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=18)">

Strips right down 
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=19)">

Strips right up 
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=20)">

Random bars horizontal 
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=21)">

Random bars vertical 
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=22)">

Random
<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=23)">

Per ottenere degli effetti simili in uscita dalla pagina è sufficiente sostituire nel codice Page-Enter con Page-Exit.
Tutti gli esempi presentati in questo articolo sono compatibili esclusivamente con Microsoft Internet Explorer 4 e 5, ma non generano messaggi di errore quando sono visualizzati da un browser Netscape. Quest'ultima peculiarità permette di generare effetti speciali senza scadimento delle prestazioni, ma con la consapevolezza che solo parte degli utenti potranno apprezzarli.


Internet News è un mensile della Casa Editrice Tecniche Nuove S.p.A.
© 1995/99. Tutti i diritti sono riservati.
Internet News non risponde di eventuali errori e omissioni.
Commenti a: inews@tecnet.it