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

Posizionamento HTML HTML posiziona gli elementi nella pagina seguendo il flusso del codice. 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. CSS permette di gestire un sistema di coordinate nella pagina del browser (detto posizionamento assoluto) L’origine di questo sistema è 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 per il posizionamento Per posizionare un elemento HTML (immagine, paragrafo, etc.) nella pagina si usa la sintassi CSS, da mettere nel tag iniziale dell’elemento 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) <IMG SRC=“immagine.gif" style="position:absolute;left:200;top:50">

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.pixelLeft posizione orizzontale style.pixelTop posizione verticale

Esempio 1 Ogni volta che si clicca sul pulsante lo script muove l’immagine di 20 pixel verso destra. Provare ad aggiungere altri 3 pulsanti per muovere l’immagine verso sinistra, verso il basso e verso l’alto. <IMG ID=myimg src="immagine.jpg" STYLE="position:absolute;left:100;top:100"> <BUTTON onclick="muovi_a_destra()">Muovi a destra</BUTTON> <SCRIPT> function muovi_a_destra() { x=document.getElementById("myimg"); x.style.pixelLeft = x.style.pixelLeft + 20; } </SCRIPT>

Esempio 2 Usando un setInterval, mandiamo in esecuzione ripetutamente le istruzioni che muovono l’immagine da sinistra verso destra nello schermo. Notare che quando la posizione supera la larghezza dello schermo, viene messa la barra di scorrimento orizzontale <IMG ID=myimg src="immagine.jpg" STYLE="position:absolute;left:100;top:100"> <SCRIPT> function muovi_a_destra() { x=document.getElementById("myimg"); x.style.pixelLeft = x.style.pixelLeft + 20; } setInterval("muovi_a_destra()",200); </SCRIPT>

Esempio 3 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.pixelLeft = a; x.style.pixelTop = b; } setInterval("muovi_a_caso()",200); // ripete ripetutamente </SCRIPT>

Esempio 4 In aggiunta al movimento casuale dell’immagine, aggiungiamo nell’immagine un evento onclick che mostra una finestra di alert se l’immagine viene colpita con il click (in rosso sono le modifiche da aggiungere allo script precedente). <IMG ID=myimg src="immagine.jpg" STYLE="position:absolute;left:100;top:100“ onclick="mi_hai_colpito()"> <SCRIPT> 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); </SCRIPT>