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.

Presentazioni simili


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

1 Posizionamento Come posizionare gli elementi HTML nella pagina web e come JavaScript può muoverli

2 Posizionamento HTML HTML posiziona gli elementi nella pagina seguendo il flusso del codice. 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. CSS permette di gestire un sistema di coordinate nella pagina del browser (detto posizionamento assoluto) Lorigine di questo sistema è 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 per il posizionamento Per posizionare un elemento HTML (immagine, paragrafo, etc.) nella pagina si usa la sintassi CSS, da mettere nel tag iniziale dellelemento style="position:absolute;left:100;top:50" Ovviamente i valori delle due coordinate left e top (100 e 50) vanno sostituiti a piacere Esempio (posizionamento di una immagine)

6 Come JavaScript può gestire il posizionamento Javascript può agire sulla posizione di un oggetto HTML per modificarla utilizzando le due proprietà (valide solo in IE) Le due proprietà consentono di leggere il valore della posizione o di assegnare un valore ad essa style.pixelLeftposizione orizzontale style.pixelTop posizione verticale

7 Esempio 1 Muovi a destra function muovi_a_destra() { x=document.getElementById("myimg"); x.style.pixelLeft = x.style.pixelLeft + 20; } Ogni volta che si clicca sul pulsante lo script muove limmagine di 20 pixel verso destra. Provare ad aggiungere altri 3 pulsanti per muovere limmagine verso sinistra, verso il basso e verso lalto.

8 Esempio 2 function muovi_a_destra() { x=document.getElementById("myimg"); x.style.pixelLeft = x.style.pixelLeft + 20; } setInterval("muovi_a_destra()",200); Usando un setInterval, mandiamo in esecuzione ripetutamente le istruzioni che muovono limmagine da sinistra verso destra nello schermo. Notare che quando la posizione supera la larghezza dello schermo, viene messa la barra di scorrimento orizzontale

9 Esempio 3 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.pixelLeft = a; x.style.pixelTop = 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

10 Esempio 4 function muovi_a_caso() { // le stesse istruzioni dello script la precedente } function mi_hai_colpito() { alert("Complimenti! Mi hai colpito"); } setInterval("muovi_a_caso()",200); In aggiunta al movimento casuale dellimmagine, aggiungiamo nellimmagine un evento onclick che mostra una finestra di alert se limmagine viene colpita con il click ( in rosso sono le modifiche da aggiungere allo script precedente ).


Scaricare ppt "Posizionamento Come posizionare gli elementi HTML nella pagina web e come JavaScript può muoverli."

Presentazioni simili


Annunci Google