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

Posizionamento HTMLHTML posiziona gli elementi nella pagina seguendo il flusso del codice. Lattributo align pu modificare il posizionamento rispetto al flusso degli altri elementi.Ad esempio il codice HTMLQuesto un paragrafo contenente una immagine e del testoQuesto un altro paragrafo contenente unaltra immagine e del testo viene reso:

Posizionamento CSSTramite 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)Lorigine di questo sistema, con coordinate (0,0), il punto in alto a sinistraLasse orizzontale orientato da sinistra verso destraLasse verticale orientato dallalto verso il basso

Coordinate e unit di misuraLe due coordinate vengono dette left e topIl 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, loggetto assume la posizione indicata indipendentemente dal resto degli oggetti sulla pagina.

Sintassi HTML per il posizionamentoHTML ha due modi per posizionare un elemento nella paginaAssoluto: posiziona lelemento 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 dellelemento: style="position:absolute; left:100;top:50 Relativo: posiziona lelemento 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 dellelemento:

style="position:relative; left:100;top:50"

Esempio di posizionamento HTMLPosizionamento assoluto Copiare il codice nella pagina HTML (cambiare il nome del file immagine con una effettivamente presente nella cartella)

Esempio di posizionamento HTMLPosizionamento relativo Cambiare tipo di posizionamento, da absolute a relative e vedere cosa cambia.

Come JavaScript pu gestire il posizionamentoJavascript 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 essaFare attenzione che i due valori sono stringhe contenenti lunit di misura px (e non numeri, come ci si aspetterebbe)

style.leftposizione orizzontale, es. 100px style.top posizione verticale, es. 80px

EsempioFare rilevare a Javascript le due propriet left e top di un oggetto sulla pagina.Si noter che nella finestra di alert viene messa lunit di misura, cio top e left vengono interpretate come stringhe.

Problemi se si calcola con la posizioneIn molti script si desidera rilevare la posizione di un oggetto e modificarla.Poich style.left e style.top hanno lunit di misura, una istruzione del genere p.style.left = p.style.left + 20; che vorrebbe rilevare la posizione orizzontale delloggetto p, aumentarla e riassegnarla alloggetto, 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 (nelles. "100px20"), che il codice non interpreta come posizione valida.

Come ovviare al problemaJavaScript fornisce la funzione parseInt che forza largomento a diventare numero intero.Nel caso delle posizioni, parseInt("100px") diventa in numero 100

Listruzione 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

function muovi_a_caso() { x = document.getElementById("myimg"); // estrae a caso due numeri per il posizionamentoa = 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 Movimento casuale di una immagine nella pagina.Usando la random e setInterval, muoviamo ripetutamente limmagine nello schermo

Esempio 2Usando 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 scompareIo scorro

x=document.getElementById("mytext"); function muovi_a_destra() { x.style.left = parseInt(x.style.left) + 20; } setInterval("muovi_a_destra()",200);