Asbafo
a- a+

Le immagini e i piani


Se avessi due o tre immagini e volessi sovrapporle inuna pagina oppure volessi che il testo scorresse sottole immagini? Con il solo HTML sarebbe impossibile, masi possono ottenere questi risultati con un foglio distile agendo sui piani ed associandoli ai selettori diidentità 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 pixelsper 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'immaginerispetto al foglio si utilizza l'elemento di stileposition 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 solaimmagine. Supponiamo di voler assegnare unposizionamento assoluto di 80 pixels da sinistra e di200 pixels dall'alto nella nostra pagina, in questoprimo 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 è dispostaesattamente nella posizione voluta ignorandocompletamente il pulsante "Indietro" che,osservando il linguaggio HTML, si trova inrealtà sotto di essa. In altre parole usandol'elemento di stile position e il valore absolutel'immagine associata si comporta come se nellapagina non vi fosse niente altro.

 

Vediamo cosa succede invece cambiando il valore daabsolute a relative. Utilizziamo esattamente lo stessoesempio, ma inserendo, prima del paragrafo che richiamal'immagine, un altro paragrafo di testo in manieratale 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 inmaniera relativa rispetto all'elemento che laprecede cioè a 200 pixels (top:200px) dallastringa di testo e sempre a 80 pixels da sinistra inquanto, alla sua sinistra, non c'è alcunelemento. Il pulsante appare più in altodell'immagine in quanto, gerarchicamente,all'interno della pagina è richiamato dallaterza riga di comando.
 
Stai attento a non abusare del valore absolutenell'elemento di stile position. Fintanto che leimmagini sono le uniche cose presenti nella pagina nonvi sono problemi, ma quando assieme ad esse èpresente testo o tabelle o altri contenuti, chivisualizza il sito con una risoluzione diversa o con uncarattere differente, oppure addirittura in unasemplice finestra anziché a tutto schermo,vedrebbe una pagina totalmente diversa da quella chehai progettato. Avendo assegnato infatti unposizionamento assoluto, l'immagine sitroverà sempre nel medesimo punto della pagina,nel nostro esempio a 200 pixels dall'alto e ad 80da sinistra, e potrebbe sovrapporsi agli altrielementi. Meglio perciò ricorrere, quandopossibile, al valore relative per l'elemento distile position. 

 

Vediamo un esempio con una pagina contenente del testoper comprendere meglio la differenza tra i valoriabsolute 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 comevalore absolute, ha ignorato totalmente il testo e visi è disposto sopra coprendolo, mentre ilsecondo cerchio, che ha come valore relative, siè posizionato 50 pixels sotto il paragrafo deltesto che lo precede nella pagina HTML.

 

Torniamo comunque all'elemento di stileposition:absolute per vedere qualcosa che con il soloHTML è impossibile da ottenere. Utilizziamo perl'esempio tutte e tre le immagini e creiamo treselettori 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 sisono sovrapposte assumendo la posizione assoluta cheabbiamo assegnato ai tre selettori di identità.Lo stesso risultato si sarebbe ottenuto anche conl'elemento di stile position:relative con ladifferenza, come abbiamo già detto, che in talcaso il posizionamento sarebbe avvenuto in funzioneagli altri elementi circostanti.

 

12.2 I piani

 
Nell'ultimo esempio abbiamo visto come le immaginipossano sovrapporsi. Si sono però dispostenell'ordine in cui le abbiamo inseritenell'HTML: la prima sotto, la seconda in mezzo e laterza 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 nonostantenulla sia cambiato all'interno del linguaggio HTML.La modifica è stata apportata dall'elementodi stile z-index:1 associato, appunto, all'immaginedel cerchio.

 

Ma esiste un'altra particolaritàinteressante. Occorre sapere che il piano del testo havalore 0. Quindi se noi assegnamo all'elemento distile z-index un valore inferiore allo 0 cosasuccederà? 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 cheequivale a z-index:0), si è disposto inposizione assoluta sopra il testo. Il secondo quadrato,che ha un elemento di stile z-index:-1, si èdisposto sempre in posizione assoluta, ma sotto iltesto: lo scritto è infatti visibile sopra diesso.
 
Tutti ciò che è stato mostrato vuoleessere solo una panoramica degli effetti spettacolariche si possono ottenere con un uso attento delleimmagini e dei piani: tutto sta ovviamente nella tuacreatività

 



Ti potrebbe interessare anche

commenta la notizia