La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

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

Presentazioni simili


Presentazione sul tema: "Posizionamento Come posizionare gli elementi HTML nella pagina web e come JavaScript può muoverli cambiando la loro posizione nel tempo."— Transcript della presentazione:

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

2 Posizionamento HTML HTML 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 HTML Questo è un paragrafo contenente una immagine e del testo Questo è un altro paragrafo contenente unaltra immagine e del testo viene reso:

3 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) Lorigine di questo sistema, con coordinate (0,0), è il punto in alto a sinistra Lasse orizzontale è orientato da sinistra verso destra Lasse verticale è orientato dallalto verso il basso

4 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, loggetto assume la posizione indicata indipendentemente dal resto degli oggetti sulla pagina.

5 Sintassi HTML per il posizionamento HTML ha due modi per posizionare un elemento nella pagina Assoluto: 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"

6 Esempio di posizionamento HTML Posizionamento assoluto Copiare il codice nella pagina HTML (cambiare il nome del file immagine con una effettivamente presente nella cartella) Limmagine è posizionata in modo assoluto. Notare che la posizione è relativa allorigine del sistema di coordinate dello schermo. Limmagine si sovrappone al testo di questo paragrafo. Copiare questo codice e vedere leffetto. Cambiare inoltre le coordinate dellimmagine. Notare che si possono dare numeri di pixel maggiori della risoluzione dello schermo. In tal caso limmagine non viene mostrata nella pagina.

7 Esempio di posizionamento HTML Posizionamento relativo Cambiare tipo di posizionamento, da absolute a relative e vedere cosa cambia. Limmagine è posizionata in modo relativo. Notare che la posizione è relativa a quella che limmagine avrebbe nel testo se non fosse posizionata. Limmagine si sovrappone comunque al testo di questo paragrafo. Copiare questo codice e vedere leffetto. Cambiare inoltre le coordinate dellimmagine.

8 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 lunità di misura px (e non numeri, come ci si aspetterebbe) style.leftposizione orizzontale, es. 100px style.top posizione verticale, es. 80px

9 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 lunità di misura, cioè top e left vengono interpretate come stringhe. Io scorro p=document.getElementById("mytext"); alert(p.style.top); alert(p.style.left);

10 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 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.

11 Come ovviare al problema JavaScript 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.

12 Esempio 1 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 Movimento casuale di una immagine nella pagina. Usando la random e setInterval, muoviamo ripetutamente limmagine nello schermo

13 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 Io scorro x=document.getElementById("mytext"); function muovi_a_destra() { x.style.left = parseInt(x.style.left) + 20; } setInterval("muovi_a_destra()",200);


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

Presentazioni simili


Annunci Google