Scroller con testo e immagini fisse
Massimiliano Valente – mvalente@tecnet.it
Massimiliano Valente - mvalente@tecnet.it
Dynamic Html consente di gestire immagini o testi indipendentemente dallo scorrimento verticale della pagina. In altre parole possiamo collocarli sempre in primo piano, a vantaggio di logo o link che si vogliono mantenere in posizione preminente rispetto al resto del documento
Chi Φ solito frequentare i siti Web ospitati da Geocities, avrα certamente notato un inedito strumento promozionale che da qualche mese campeggia sulle home page dei "geocitizen". Si tratta di un logo in formato grafico GIF, con link associato alla home page della comunitα. Una procedura automatizzata impone di visualizzarlo a ogni apertura di pagina senza che l’utente abbia inserito alcun codice o richiamo: il logo rimane fisso nella porzione di documento in basso a destra, comunque si faccia scorrere la pagina. In questo modo acquista maggior visibilitα e, di conseguenza, maggiori possibilitα di essere cliccato dai visitatori. L’interessante effetto grafico Φ reso possibile da Dynamic Html che, grazie ad appropriati accorgimenti, ne rende compatibile l’uso con la quarta generazione di Internet Explorer e Netscape.
Di seguito vi mostreremo, attraverso esempi che troverete anche sul CD-ROM allegato, come mantenere fissa un’immagine o un messaggio di testo anche in caso di scorrimento della pagina servendosi di questi accorgimenti.
Innanzitutto Φ necessario creare un’immagine con estensione GIF o JPG da inserire nell’esempio. Nonostante sia indifferente l’uso dell’uno o dell’altro formato grafico, vi consigliamo di adottare il GIF per rendere trasparente un colore, armonizzando l’immagine con il resto della pagina.
Il codice javascript relativo al funzionamento della nostra dimostrazione viene inserito in un file esterno con estensione .js. La ragione di questa scelta, preferita all’inserimento nella stessa pagina Html, Φ nella prevedibile esigenza di voler inserire il logo fisso in tutte le pagine del sito. Richiamando da qualsiasi pagina il file esterno "script.js" otterremo il non trascurabile vantaggio che, nel caso di una sua variazione, non dovremo necessariamente modificare decine di pagine. Se, per esempio, abbiamo l’esigenza di sostituire il link associato all’immagine, agiremo solo ed esclusivamente sul file .js esterno e, automaticamente, tutte le pagine Html che lo richiamano subiranno la modifica.
Il nostro esempio/dimostrazione si compone di tre file: "script.js", "esempio.htm" e "staticlogo.gif". Analizziamoli singolarmente.
Script.js
Questo file esterno contiene il codice javascript necessario al funzionamento della demo. La creazione di un file con estensione js Φ molto semplice, e avviene in fase di salvataggio da un normale editor di testi (NotePad di Win95, per esempio), quando, invece di salvare come .html, il file viene salvato come .js. Nel nostro esempio "script.js" contiene sei variabili che possono essere personalizzate per adattarle alle proprie esigenze.
if (document.images)
var staticlogo=new Image(150,54)
I valori 150 e 54 si riferiscono rispettivamente alla larghezza (width) e altezza (height) in pixel dell'immagine che desideriamo mantenere fissa.
staticlogo.src="staticlogo.gif"
Questa riga di codice indica il percorso per richiamare l'immagine dal server o dal nostro hard disk. In questo caso l'immagine "staticlogo.gif" si trova nella stessa directory del file js esterno.
var logolink=http://inews.tecnet.it
La variabile "logolink" stabilisce il link associato al logo. Nel nostro esempio si tratta di un link a risorse esterne, ma nulla vieta che si riferisca a un file depositato sullo stesso server.
var alttext="Raggiungi il sito di Internet News"
La variabile "alttext" assegna all'immagine il classico testo alternativo che solitamente viene inserito nel tag "ALT" di Html.
var fadeintoview=1
Questa variabile Φ riconosciuta soltanto da Internet Explorer, mentre Navigator la ignora; consente l'effetto fade per la visualizzazione dell'immagine. "Fade" Φ il classico effetto sfumato, grazie al quale l'immagine progressivamente diventa nitida. Impostando la variabile sul valore "1" l'effetto sfumatura diventa attivo, mentre rimane inattivo impostando il valore "0".
var visibleduration=0
L'ultima variabile da personalizzare Φ quella che regola il tempo di permanenza dell'immagine sulla pagina. I valori sono espressi in secondi; se desideriamo mantenerla visibile per un minuto imposteremo la variabile su un valore pari a "60"; se, come nel nostro esempio, intendiamo mantenere l'immagine fissa senza che scompaia il valore va impostato su "0".
Per il corretto funzionamento della demo, il codice successivo alla "visibleduration" non va modificato in alcun punto. La complessitα di tale sintassi Φ dovuta ai differenti approcci al DOM che Netscape e Microsoft hanno adottato per i propri browser.
Esempio.htm
Il file non contiene codice javascript, ma soltanto un richiamo al file esterno "script.js" analizzato in precedenza. Il richiamo avviene all'interno dei tag <HEAD> del documento:
<HEAD>
<script src="script.js">
</script>
</HEAD>
La scelta di un file esterno per la gestione della dimostrazione facilita gli aggiornamenti e velocizza le modifiche. Se in seguito volete eliminare completamente l'immagine fissa non dovrete fare altro che "svuotare" il file esterno "script.js". Cos“ facendo nel documento Html non si produrrα alcun effetto.
La nostra dimostrazione prevede il posizionamento del logo in tre differenti sposizioni della pagina Html. Per esigenze particolari, Φ possibile posizionare l'immagine in altri punti del documento. Nel CD-ROM allegato alla rivista troverete le dimostrazioni che visualizzano l'immagine in altrettante posizioni differenti:
╚ possibile ottenere sul testo un effetto identico a quello sin qui descritto per le immagini. La sintassi javascript non si discosta molto da quella finora esaminata.
Per le stesse ragioni esposte in precedenza, Φ buona regola creare un file esterno .js che contenga tutto il codice javascript necessario al corretto funzionamento della demo.
Testo.js
Anche questo file contiene una serie di variabili da modificare in base alle proprie esigenze, e altro codice da lasciare inalterato per il corretto funzionamento della nostra dimostrazione.
var message='<div align="center"><b><font face="Arial"><a href="http://inews.tecnet.it">INTERNET NEWS</a> - La prima e più diffusa rivista del settore</font></b></div>'
La prima variabile "message" fa riferimento al testo da visualizzare all'interno del riquadro. Come si nota, non Φ necessario servirsi di particolari tag Html per la formattazione del testo. L'allineamento, i link e caratteristiche del testo vengono impostate con normalissimi comandi Html.
var backgroundcolor="yellow"
Questa variabile stabilisce il colore di sfondo base della finestra entro la quale viene visualizzato il testo. Per una maggiore precisione di scelta il nome inglese del colore pu≥ essere sostituito da valori esadecimali (per esempio #FFFFD2 per un giallo pi∙ chiaro).
var displaymode=0
La variabile "displaymode" pu≥ essere impostata su tre valori: 0, 1 e 2.
Impostandola su "0" il testo rimane visibile finchŽ non si passa ad un’altra pagina; il valore "1", al contrario, indica la sua comparsa dopo un certo numero di secondi. Infine, il valore di variabile pari a "2" indica che il testo appare soltanto dopo un certo numero di secondi dall'apertura della pagina.
Il tempo trascorso per valori di "diplaymode" pari a 1 e 2 viene stabilito dalla quarta variabile:
var displayduration=10000
Il tempo Φ indicato in millisecondi, per cui nel nostro esempio il testo appare o scompare dopo 10 secondi.
var flashmode=1
La variabile "flashmode" impostata su "1" determina il cambiamento di colore da giallo ad arancione; se impostato su "0", invece, elimina l'effetto intermittente del colore.
var flashtocolor="orange"
Nel caso in cui "flashmode" sia impostato a 1, l'ultima variabile "flashtocolor" stabilisce il colore di sfondo da alternare a quello di default. In questo caso, come giα descritto in precedenza, il valore alfabetico "orange" pu≥ essere sostituito da un valore esadecimale.
Soluzioni per MSIE4
Il DOM di Internet Explorer consente approcci diversi per ottenere gli stessi risultati finora esaminati.
Grazie alle proprietα dei fogli di stile, Φ possibile impostare un'immagine di background fissa, cioΦ che non segue lo scorrimento della pagina, ma rimane visualizzata sempre nello stesso punto.
Ottenere questo risultato Φ molto semplice:
<STYLE>
body { background:URL(sfondo.jpg) fixed no-repeat }
</STYLE>
Un altro approccio, solo ed esclusivamente per l'immagine di sfondo, consente di evitare l'uso di CSS e agire direttamente sul classico tag <BODY>:
<BODY background="sfondo.jpg" bgproperties="fixed">
Sia i CSS sia la proprietα "fixed" del tag <BODY> agiscono esclusivamente sulle immagini di sfondo del documento Html. Per ottenere lo stesso risultato su un'immagine o un testo in altre porzioni della pagina Φ sufficiente servirsi di uno script e delle proprietα di posizionamento assoluto:
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function resetLogo() {
document.all.Logo.style.posTop = document.body.scrollTop;
document.all.Logo.style.posLeft =
document.body.scrollLeft;
}
</SCRIPT>
</HEAD>
<BODY ONSCROLL="resetLogo()" bgcolor="white">
<DIV ID="Logo" STYLE="position:absolute; z-index:1; top:0px; left:0px;">
<img src="staticlogo.gif" width=150 height=54 border=0 alt="Internet News">
</DIV>
Lo script pu≥ essere implementato con la proprietα "display" per renderlo visibile solo per un certo numero di secondi. La proprietα "z-index" posiziona il logo sopra o sotto gli elementi della pagina; se il valore impostato Φ "-1" il logo viene collocato al di sotto degli altri oggetti del documento, che quindi lo renderanno parzialmente visibile; al contrario, se impostato su "1" posiziona l'immagine in primo piano rispetto agli altri contenuti della pagina.
Esempio08 + 08a.tif
Gli ultimi tre esempi descritti sono incompatibili con tutte le versioni attualmente disponibili di Netscape Navigator, e ci potranno essere problemi anche con le beta di Microsoft Internet Explorer 5. Ora tocca a voi. Buon lavoro!