ELIANA TOMMASO INDICE

AGGIUNGERE LA PROPRIA FIRMA IN BASSO A DESTRA

Abbiamo già descritto un metodo per inserire un' immagine di sfondo nel proprio sito in posizione fissa prestabilita.
La nostra lettrice chiede però una cosa diversa: vuole inserire uno sfondo nella pagina, e sopra la propria firma. Questa non può essere aggiunta come immagine direttamente allo sfondo, perché non si sa a priori quale sia la risoluzione dello schermo dell'utente.
Abbiamo risolto il problema attraverso l'uso dei fogli di stile e di JavaScript.
Il risultato si vede in questa pagina, almeno se si usa un browser tipo Explorer 5 o superiore.

PRIMO PASSO

Attraverso il seguente codice, da inserire fra i tags <head>ed </head>

<Style Type="TEXT/CSS">
.scritta {position:absolute; width:120px; height:70px; font-style:italic; font-weight:bold; color:navy}
</Style>

viene definito uno stile per la nostra firma: la posizione sarà assoluta, e cioè non calcolata rispetto a un'altro oggetto nella stessa pagina. Abbiamo poi scelto un formato di dimensioni 120 x 70 pixels, lo stile corsivo e grassetto, il colore navy.

Abbiamo chiamato lo stile .scritta, ed ad esso dovremo fare riferimento ogni volta che lo vorremo usare.

SECONDO PASSO

Per posizionare la nostra firma, useremo il seguente codice, da inserire fra i tags <body>e </body>

<SPAN id="firma" CLASS=scritta  LEFT: 0px; TOP: 250px;">
ELIANA  TOMMASO
</SPAN>

Uno Span è in pratica una sorta di foglio trasparente che viene "incollato" sopra alla pagina di testo nella posizione stabilita dagli attributi LEFT (distanza dal lato sinistro dello schermo) e TOP (distanza dal lato superiore). All'interno dei tags <Span> e </Span> può essere inserito tutto quanto si trova normalmente in una pagina HTML, come testo, immagini, tabelle, marquees, collegamenti ipertestuali. Normalmente però questo tag viene usato per inserire una breve frase all'interno di un paragrafo. Al suo posto può essere usato anche il tag DIV, che comunque forza il testo ad andare a capo e si usa, di solito, per formattare una parte abbastanza ampia di testo.
L'attributo id dà un nome allo Span, che altrimenti non potrebbe essere richiamato, ad esempio, nei codici Javascript.
L'attributo Class definisce invece lo stile del testo, scegliendolo tra quelli creati precedentemente come mostrato nel primo passo.
Chiaramente scriveremo, al posto di ELIANA TOMMASO, la nostra firma.

TERZO PASSO

Definiamo la funzione JavaScript con i seguenti compiti:
  1. Calcolare la posizione in basso e a sinistra dello schermo di un qualsiasi utente
  2. Aggiornare ogni tanto il calcolo di questa posizione poiché la pagina può occupare più di una videata, e la nostra firma rischia di spostarsi insieme al resto del testo. Ecco il codice, da inserire fra i tags <head>ed </head>

    <script language=JavaScript>
  function poni() {
       if (document.getElementById) {
         oggetto=eval("document.getElementById('firma').style")
         oggetto.left = sinistra(oggetto.left)
         oggetto.top =alto(oggetto.top)
      }
 var timer=setTimeout("poni('firma')",30)
   }

function sinistra(sn) {
     sn=document.body.scrollLeft+document.body.clientWidth-120
     return sn
 }
 function alto(sup) {
     sup=document.body.scrollTop+document.body.clientHeight-100
     return sup
 }
</script>

    La funzione poni valuta lo stile e calcola la posizione superiore (oggetto.top), e quella sinistra (oggetto.left). Per questo, essa richiama le seguenti funzioni:

    L'istruzione var timer=setTimeout("poni()",30) richiama in modo ricorsivo la funzione stessa ogni 30 millisecondi: in questo modo, se l'utente fa scorrere la pagina, la firma si riposiziona comunque in basso a destra.

    QUARTO ED ULTIMO PASSO

    Il tag <body> va cambiato in questo modo:

    <body  background="..." style="background-attachment:fixed" OnLoad="poni()">

    Non appena la pagina si apre, viene attivata la funzione poni('firma'). Al posto dei puntini scrivere il nome dello sfondo con relativa estensione.
    Se vi piace quello che abbiamo usato noi, cliccate a destra con il mouse in un punto della pagina e scegliete l'opzione "Salva sfondo con nome". Altri sfondi possono essere scaricati cliccando qui

    Per la buona riuscita del codice, si consiglia di usare "Copia - Incolla". Infatti, in JavaScript, anche il cambio di una minuscola con la maiuscola può dare problemi.

    INDICEINDIETRO

    ©2002 - 2010 www.webfract.it