Posizionamento Come posizionare gli elementi HTML nella pagina web e come JavaScript può muoverli cambiando la loro posizione nel tempo

Posizionamento HTML HTML posiziona gli elementi nella pagina seguendo il flusso del codice. L’attributo align può modificare il posizionamento rispetto al flusso degli altri elementi. Ad esempio il codice HTML <P><IMG SRC="immagine1.gif" align="left">Questo è un paragrafo contenente una immagine e del testo</P> <P><IMG SRC="immagine2.gif" align="right">Questo è un altro paragrafo contenente un’altra immagine e del testo</P> viene reso:

Posizionamento CSS Tramite gli stili CSS è possibile forzare la posizione degli elementi HTML sulla pagina, indicandola in modo esatto, indipendentemente dagli altri elementi HTML della pagina. CSS permette di gestire un sistema di coordinate nella pagina del browser (detto posizionamento assoluto) L’origine di questo sistema, con coordinate (0,0), è il punto in alto a sinistra L’asse orizzontale è orientato da sinistra verso destra L’asse verticale è orientato dall’alto verso il basso

Coordinate e unità di misura Le due coordinate vengono dette left e top Il loro valore è un numero intero che indica i pixel di distanza dal lato verticale sinistro della pagina (left) e dal lato orizzontale superiore della pagina (top) Se la coordinata è negativa, il punto non viene visualizzato nella pagina. Se il numero è maggiore della dimensione dello schermo, vengono messe le barre di scorrimento nella finestra. Quando ad un oggetto viene attribuito un posizionamento assoluto, l’oggetto assume la posizione indicata indipendentemente dal resto degli oggetti sulla pagina.

Sintassi HTML per il posizionamento HTML ha due modi per posizionare un elemento nella pagina Assoluto: posiziona l’elemento rispetto il sistema di coordinate della pagina, indipendentemente dagli altri elementi. Questo fatto può generare la sovrapposizione degli elementi posizionati sugli altri. Sintassi CSS, da mettere nel tag iniziale dell’elemento: style="position:absolute; left:100;top:50“ Relativo: posiziona l’elemento rispetto alla posizione che avrebbe avuto nel flusso HTML tenendo conto degli altri elementi. Anche questo modo può generare la sovrapposizione degli elementi. Sintassi CSS, da mettere nel tag iniziale dell’elemento: style="position:relative; left:100;top:50"

Esempio di posizionamento HTML Posizionamento assoluto Copiare il codice nella pagina HTML (cambiare il nome del file immagine con una effettivamente presente nella cartella) <p><IMG SRC=“immagine.gif" style="position:absolute;left:200;top:150">L’immagine è posizionata in modo assoluto. Notare che la posizione è relativa all’origine del sistema di coordinate dello schermo. L’immagine si sovrappone al testo di questo paragrafo. Copiare questo codice e vedere l’effetto. Cambiare inoltre le coordinate dell’immagine. Notare che si possono dare numeri di pixel maggiori della risoluzione dello schermo. In tal caso l’immagine non viene mostrata nella pagina.</p>

Esempio di posizionamento HTML Posizionamento relativo Cambiare tipo di posizionamento, da absolute a relative e vedere cosa cambia. <p><IMG SRC=“immagine.gif" style="position:relative;left:200;top:150">L’immagine è posizionata in modo relativo. Notare che la posizione è relativa a quella che l’immagine avrebbe nel testo se non fosse posizionata. L’immagine si sovrappone comunque al testo di questo paragrafo. Copiare questo codice e vedere l’effetto. Cambiare inoltre le coordinate dell’immagine.</p>

Come JavaScript può gestire il posizionamento Javascript può agire sulla posizione di un oggetto HTML per modificarla utilizzando le due proprietà left e top. Le due proprietà consentono sia di leggere il valore della posizione che di assegnare un valore ad essa Fare attenzione che i due valori sono stringhe contenenti l’unità di misura ‘px’ (e non numeri, come ci si aspetterebbe) style.left posizione orizzontale, es. 100px style.top posizione verticale, es. 80px

Esempio Fare rilevare a Javascript le due proprietà left e top di un oggetto sulla pagina. Si noterà che nella finestra di alert viene messa l’unità di misura, cioè top e left vengono interpretate come stringhe. <P ID="mytext" STYLE="position:absolute;left:100;top:100“> Io scorro</P> <SCRIPT> p=document.getElementById("mytext"); alert(p.style.top); alert(p.style.left); </SCRIPT>

Problemi se si calcola con la posizione In molti script si desidera rilevare la posizione di un oggetto e modificarla. Poiché style.left e style.top hanno l’unità di misura, una istruzione del genere p.style.left = p.style.left + 20; che vorrebbe rilevare la posizione orizzontale dell’oggetto p, aumentarla e riassegnarla all’oggetto, dà un errore. Infatti, poiché p.style.left è una stringa (es. "100px"), il +20 viene interpretato come unione di stringhe e produce quindi una stringa (nell’es. "100px20"), che il codice non interpreta come posizione valida.

Come ovviare al problema JavaScript fornisce la funzione parseInt che forza l’argomento a diventare numero intero. Nel caso delle posizioni, parseInt("100px") diventa in numero 100 L’istruzione p.style.left = parseInt(p.style.left) + 20; funziona, perché prima di sommare 20 alla coordinata left, la rende numero intero con la funzione parseInt.

Esempio 1 Movimento casuale di una immagine nella pagina. Usando la random e setInterval, muoviamo ripetutamente l’immagine nello schermo <IMG ID=myimg src="immagine.jpg" STYLE="position:absolute;left:100;top:100"> <SCRIPT> function muovi_a_caso() { x = document.getElementById("myimg"); // estrae a caso due numeri per il posizionamento a = parseInt(Math.random()*800)+50; b = parseInt(Math.random()*600)+50; // usa questi numeri per il posizionamento x.style.left = a; x.style.top = b; } setInterval("muovi_a_caso()", 200); // ripete ripetutamente </SCRIPT>

Esempio 2 Usando un setInterval, mandiamo in esecuzione ripetutamente le istruzioni che muovono il testo da sinistra verso destra nello schermo. Notare che quando la posizione supera la larghezza dello schermo, viene messa la barra di scorrimento orizzontale e il paragrafo ‘scompare’ <P ID="mytext" STYLE="position:absolute;left:100;top:100">Io scorro</P> <SCRIPT> x=document.getElementById("mytext"); function muovi_a_destra() { x.style.left = parseInt(x.style.left) + 20; } setInterval("muovi_a_destra()",200); </SCRIPT>