Asbafo
a- a+

Le immagini e i piani


Se avessi due o tre immagini e volessi sovrapporle in una pagina oppure volessi che il testo scorresse sotto le immagini? Con il solo HTML sarebbe impossibile, ma si possono ottenere questi risultati con un foglio di stile agendo sui piani ed associandoli ai selettori di identità che abbiamo visto nella quarta lezione.

Per i nostri esempi useremo queste tre immagini

 

rosa.gif (148 byte)rosa.gif delle dimensioni di 100 pixels per 100

 
verde.gif (360 byte)verde.gif delle dimensioni di 100 pixels per 100
 

blu.gif (357 byte)blu.gif delle dimensioni di 100 pixels per 100

 

La seconda e terza immagine sono GIF dotate di trasparenza.

 

12.1 Posizionamento di un'immagine

 
Per determinare la posizione di un'immagine rispetto al foglio si utilizza l'elemento di stile position che ha tre valori:
  • absolute (posizionamento assoluto)
  • relative (posizionamento relativo)
  • static (posizionamento normale)

Il posizionamento assoluto non considera minimamente il contenuto dei dati presenti nel foglio e posizionerà l'immagine esattamente nel punto prestabilito, indipendentemente dal fatto che nel medesimo punto sia presente testo o altro.

Il posizionamento relativo dispone invece l'immagine ad una distanza prestabilita dagli elementi che la circondano nella pagina.

Il posizionamento statico è la condizione normale e non modifica le caratteristiche degli elementi dell'HTML.

Per stabilire un posizionamento, sia esso assoluto che relativo, occorre stabilire delle distanze, anch'esse assolute o relative. A questo fine si utilizzano gli elementi di stile:

  • top (dall'alto)
  • right (da destra)
  • left (da sinistra)
  • bottom (dal basso)

Le distanze riferite a questi ultimi elementi di stile possono essere espresse in:

  • px (pixels)
  • cm (centimetri)
  • mm (millimetri)
  • pt (punti)
  • pc (pica equivalenti a 12 punti)
  • em (unità)

oppure in percentuale.

Altro elemento da prendere in considerazione è ed il piano

  • z-index

che assume un valore numerico.

Questo elemento è molto interessante quando si vogliono sovrapporre più oggetti nello stesso punto della pagina. In assenza di piano gli oggetti si posizioneranno nell'ordine che appaiono all'interno del linguaggio HTML, ma impostando un piano di visualizzazione si potrà modificare l'ordine di sovrapposizione. Un elemento che avrà uno z-index:2 apparirà sopra ad un altro che avrà uno z-index:1. Sono accettati anche valori negativi e vedremo perché.

 
Vediamo un primo esempio di posizionamento di una sola immagine. Supponiamo di voler assegnare un posizionamento assoluto di 80 pixels da sinistra e di 200 pixels dall'alto nella nostra pagina, in questo primo esempio vuota.

Creiamo un selettore di identità che chiameremo #immagine.

                #immagine {position:absolute; left:80px; top:200px}

ed aggiungiamolo al nostro foglio di stile in questo modo:

                <style type="text/css">
BODY{ background:#FFFFD1;color:#000000}
#immagine {position:absolute; left:80px; top:200px}
</style>

Per farlo agire su un'immagine abbiamo bisogno di un tag HTML qualunque e del nome dell'immagine, utilizzeremo rosa.gif.

Ecco l'esempio:

 
                <html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
     BODY{ background:#FFFFD1;color:#000000}
     #immagine {position:absolute; left:80px; top:200px}
     </style>
     </head>
     <body>
     <p id="immagine"><img src="img/rosa.gif" width="100"
      height="100"></p>
     </body>
</html>
 
 
 
Come avrai notato, l'immagine si è disposta esattamente nella posizione voluta ignorando completamente il pulsante "Indietro" che, osservando il linguaggio HTML, si trova in realtà sotto di essa. In altre parole usando l'elemento di stile position e il valore absolute l'immagine associata si comporta come se nella pagina non vi fosse niente altro.

 

Vediamo cosa succede invece cambiando il valore da absolute a relative. Utilizziamo esattamente lo stesso esempio, ma inserendo, prima del paragrafo che richiama l'immagine, un altro paragrafo di testo in maniera tale che vi sia un elemento prima dell'immagine:
 
                <html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
     BODY{ background:#FFFFD1;color:#000000}
     #immagine {position:relative; left:80px; top:200px}
     </style>
     </head>
     <body>
     <p>Questa è una scritta in un paragrafo</p>
     <p id="immagine"><img src="img/rosa.gif" width="100"
      height="100"></p>
     </body>
</html>
 
 
 
L'immagine questa volta si è disposta in maniera relativa rispetto all'elemento che la precede cioè a 200 pixels (top:200px) dalla stringa di testo e sempre a 80 pixels da sinistra in quanto, alla sua sinistra, non c'è alcun elemento. Il pulsante appare più in alto dell'immagine in quanto, gerarchicamente, all'interno della pagina è richiamato dalla terza riga di comando.
 
Stai attento a non abusare del valore absolute nell'elemento di stile position. Fintanto che le immagini sono le uniche cose presenti nella pagina non vi sono problemi, ma quando assieme ad esse è presente testo o tabelle o altri contenuti, chi visualizza il sito con una risoluzione diversa o con un carattere differente, oppure addirittura in una semplice finestra anziché a tutto schermo, vedrebbe una pagina totalmente diversa da quella che hai progettato. Avendo assegnato infatti un posizionamento assoluto, l'immagine si troverà sempre nel medesimo punto della pagina, nel nostro esempio a 200 pixels dall'alto e ad 80 da sinistra, e potrebbe sovrapporsi agli altri elementi. Meglio perciò ricorrere, quando possibile, al valore relative per l'elemento di stile position. 

 

Vediamo un esempio con una pagina contenente del testo per comprendere meglio la differenza tra i valori absolute e relative:
 
                <html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
     BODY{ background:#FFFFD1;color:#000000}
     #cerchio1 {position:absolute; left:200px; top:50px}
     #cerchio2 {position:relative; left:400px; top:50px}
     </style>
     </head>
     <body>
     <p>Questa è una scritta di esempio per mostrare la differenza tra il posizionamento assoluto e il relativo. Questa è una scritta di esempio per mostrare la differenza tra il posizionamento assoluto e il relativo. Questa è una scritta di esempio per mostrare la differenza tra il posizionamento assoluto e il relativo. Questa è una scritta di esempio per mostrare la differenza tra il posizionamento assoluto e il relativo. Questa è una scritta di esempio per mostrare la differenza tra il posizionamento assoluto e il relativo. Questa è una scritta di esempio per mostrare la differenza tra il posizionamento assoluto e il relativo. Questa è una scritta di esempio per mostrare la differenza tra il posizionamento assoluto e il relativo. </p>
     <p id="cerchio1"><img src="img/blu.gif" width="100"
     height="100"></p>
     <p id="cerchio2"><img src="img/blu.gif" width="100"
     height="100"></p>
     </body>
</html>
 
 
 
Come hai potuto vedere, il primo cerchio, che ha come valore absolute, ha ignorato totalmente il testo e vi si è disposto sopra coprendolo, mentre il secondo cerchio, che ha come valore relative, si è posizionato 50 pixels sotto il paragrafo del testo che lo precede nella pagina HTML.

 

Torniamo comunque all'elemento di stile position:absolute per vedere qualcosa che con il solo HTML è impossibile da ottenere. Utilizziamo per l'esempio tutte e tre le immagini e creiamo tre selettori di identità, rispettivamente

 

                #quadrato {position: absolute;left:300px; top:150px}

#cerchio {position : absolute; left : 325px; top: 175px}

#rombo {position : absolute; left:350px; top:200px}

 

e applichiamoli a tre paragrafi in sequenza richiamando le immagini.

Ecco l'esempio:

 
                <html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
     BODY{ background:#FFFFD1;color:#000000}
     #quadrato {position: absolute;left:300px; top:150px}
     #cerchio {position : absolute; left:325px; top:175px}
     #rombo {position : absolute; left : 350px; top: 200px}
     </style>
     </head>
     <body>
     <p id="quadrato"><img src="img/rosa.gif" width="100"
     height="100"></p>
     <p id="cerchio"><img src="img/blu.gif" width="100" height="100">
     </p>
     <p id="rombo"><img src="img/verde.gif" width="100"
      height="100"></p>
     </body>
</html>
 
 
 
Sorpresa! Come hai potuto vedere le tre immagini si sono sovrapposte assumendo la posizione assoluta che abbiamo assegnato ai tre selettori di identità. Lo stesso risultato si sarebbe ottenuto anche con l'elemento di stile position:relative con la differenza, come abbiamo già detto, che in tal caso il posizionamento sarebbe avvenuto in funzione agli altri elementi circostanti.

 

12.2 I piani

 
Nell'ultimo esempio abbiamo visto come le immagini possano sovrapporsi. Si sono però disposte nell'ordine in cui le abbiamo inserite nell'HTML: la prima sotto, la seconda in mezzo e la terza sopra le altre.

Utilizzando l'elemento di stile z-index possiamo però agire anche su questo aspetto e decidere quale delle tre immagini debba disporsi in primo piano rispetto alle altre indipendentemente dall'ordine di in cui sono inserite nel linguaggio HTML.

Il valore dell'elemento di stile è un numero. L'immagine che avrà un valore di z-index più elevato sarà in primo piano rispetto a tutte le altre.

Supponiamo, utilizzando l'esempio precedente, che il cerchio blu, che si trovava in mezzo alle altre immagini, debba apparire in primo piano. Al selettore di identità che lo identifica aggiungeremo l'elemento di stile ed il valore z-index:1 trasformandolo in questo modo:

                #cerchio {position: absolute;left:300px; top:150px; z-index:1}

Vediamo l'esempio:

 
                <html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
     BODY{ background:#FFFFD1;color:#000000}
     #quadrato {position: absolute;left:300px; top:150px}
     #cerchio {position : absolute; left:325px; top:175px; z-index:1}
     #rombo {position : absolute; left : 350px; top: 200px}
     </style>
     </head>
     <body>
     <p id="quadrato"><img src="img/rosa.gif" width="100"
     height="100"></p>
     <p id="cerchio"><img src="img/blu.gif" width="100" height="100">
     </p>
     <p id="rombo"><img src="img/verde.gif" width="100"
      height="100"></p>
     </body>
</html>
 
 
 
Il cerchio adesso è in primo piano nonostante nulla sia cambiato all'interno del linguaggio HTML. La modifica è stata apportata dall'elemento di stile z-index:1 associato, appunto, all'immagine del cerchio.

 

Ma esiste un'altra particolarità interessante. Occorre sapere che il piano del testo ha valore 0. Quindi se noi assegnamo all'elemento di stile z-index un valore inferiore allo 0 cosa succederà? Che l'immagine finirà sotto al testo! Non ci credi? Guarda l'esempio:
 
                <html>
     <head>
     <title>Titolo del documento</title>
     <style type="text/css">
     BODY{ background:#FFFFD1;color:#000000}
     #quadrato1 {position: absolute; left:200px; top:150px}
     #quadrato2 {position: absolute; right:200px; top:150px; z-index : -1}
     </style>
     </head>
     <body>
     <p>Questa è una scritta di esempio per dimostrare il funzionamento dei piani. Questa è una scritta di esempio per dimostrare il funzionamento dei piani. Questa è una scritta di esempio per dimostrare il funzionamento dei piani. Questa è una scritta di esempio per dimostrare il funzionamento dei piani. Questa è una scritta di esempio per dimostrare il funzionamento dei piani. Questa è una scritta di esempio per dimostrare il funzionamento dei piani. Questa è una scritta di esempio per dimostrare il funzionamento dei piani. Questa è una scritta di esempio per dimostrare il funzionamento dei piani. Questa è una scritta di esempio per dimostrare il funzionamento dei piani. Questa è una scritta di esempio per dimostrare il funzionamento dei piani. Questa è una scritta di esempio per dimostrare il funzionamento dei piani.</p>
     <p id="quadrato1"><img src="img/rosa.gif" width="100"
     height="100"></p>
     <p id="quadrato2"><img src="img/rosa.gif" width="100"
     height="100"></p>
     </body>
</html>
 
 
 
Come hai potuto vedere il primo quadrato, che è privo dell'elemento di stile z-index (il che equivale a z-index:0), si è disposto in posizione assoluta sopra il testo. Il secondo quadrato, che ha un elemento di stile z-index:-1, si è disposto sempre in posizione assoluta, ma sotto il testo: lo scritto è infatti visibile sopra di esso.
 
Tutti ciò che è stato mostrato vuole essere solo una panoramica degli effetti spettacolari che si possono ottenere con un uso attento delle immagini e dei piani: tutto sta ovviamente nella tua creatività

 



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Marcello
Ti è piaciuto l'articolo?