Come fare a..‎ > ‎Grafica e disegno‎ > ‎

Didascalie sulle immagini

di Maria Silvana Radice





 
Captions on the images:

Per verificare i vostri codici, prima di inserirli, potete usare l'HTML editor.

Immagine con didascalia che appare al passaggio del mouse (1):


Il codice per ottenere questo effetto, è il seguente:

<html>
<head>
<title>Didascalia immagini</title>
<style type="text/css">
.caption {
font-family: Verdana, sans-serif;
font-size: 10px;
float: left;
margin: 0;
padding: 0;
position: relative;
overflow: hidden;
text-align: center;
}

 
.caption img {                      
float: left;
margin: 0;
padding: 0;
background: #fff;
border: none;
width: 100%px;
}

 
.caption span {                                                                 
float: left;
margin: 0;
padding-bottom: 10px;
padding-top: 10px;
width: 100%;
color: #dedede;
background: #222; /* browser che non supportano rgba */
background: rgba(0,0,0,0.7);
position: absolute;
left: 0;
bottom: 0;
display: none;       
}

 
.caption span strong {                            
font-weight: bold;
font-size: 11px;
text-transform: uppercase;
display: block;
font-family: carattere;
color: black;
padding-bottom: 5px;
}


.caption:hover span { display: block; }
</style>
</head>
<body>
<table align="left">
<tr>
<td>
<div class="caption">
<img src="URL immagine" alt="" />
<span>
<strong>Titolo</strong>
Testo della didascalia
</span>
</div>
</td>
</tr>
</table>
</body>
</html>
Fonte

I parametri che potete modificare, sono quelli in rosso. Ho diviso il codice in settori di diverso colore, per rendere più chiara la spiegazione.

1) Settore verde:
  • font-family: Verdana, sans-serif: è il carattere predefinito del testo
  • font-size: 10px: è la dimensione predefinita dei caratteri del testo
2) Settore azzurro:
  • width: 100%: se lo lasciate cosi`, la larghezza dell'immagine visualizzata corrispondera` a quella reale dell'immagine. Se cambiate questa percentuale dovete cambiarla anche nel settore lilla.
3) Settore lilla:
  • color: #dedede: è il colore del testo della didascalia. Potete scriverlo col nome inglese, oppure con il suo codice (Editor colori)
  • display: none: è il parametro che serve a far comparire la didascalia solo al passaggio del mouse. Se la volete sempre visibile, dovete sostituire "none" con "block".
4) Settore arancio:
  • font-size: 11px: è la dimensione dei caratteri del titolo, se non inserito, varrà l'impostazione predefinita del settore verde
  • font-family: carattere: è il carattere del titolo, se non inserito, varrà l'impostazione predefinita del settore verde
  • color: black: è il colore del titolo. Potete scriverlo con il nome inglese, oppure con il suo codice (Editor colori)
5) Settore grigio:
  • table align="left": allineamento dell'immagine rispetto alla pagina (left=sx  right=dx  center=in centro)
  • URL immagine: qui dovete inserire l'indirizzo dell'immagine
  • Titolo: qui dovete scrivere il titolo della didascalia
  • Testo della didascalia: qui dovete scrivere il testo. Per andare a capo, dovete inserire il tag <br>.                                          Esempio:                                                                                                                                                                              
  •  Luca, Giovanni, Antonio, Massimo<br>Anna, Sofia, Angela, Patrizia                                                                                     
  • ..verranno visualizzati così:                                                                                                                                                                Luca, Giovanni, Antonio, Massimo                                                                                                                                                    Anna, Sofia, Angela, Patrizia
In Google sites, questo codice va inserito con il metodo per inserire gli script, descritto in Come inserire codici e scripts in Google sites.

Variante:

Per ottenere una didascalia senza sfondo, dovete togliere tutta questa stringa dal settore lilla:

color: #dedede;    
background: #222; /* browser che non supportano rgba */


Per inserire questo codice in Google sites, bisogna usare il metodo descritto in Come inserire codici e scripts in Google sites

Immagine con didascalia che appare al passaggio del mouse (2):

(Funziona anche con Internet Explorer)


Molto bello questo effetto, ecco il codice:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">

body
{font-family: "Lucida Grande", Verdana, Arial, sans-serif;}

#container {
max-width:250px;
margin:0 auto;
text-align: center;}

div.griglia {
display: inline-block;
width:  100%
position: relative;
overflow: hidden;}

div.foto img {display: block;}

div.testo {
color: white;
background-color: transparent;
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;}

div.griglia:hover {cursor: pointer;}
div.griglia:hover div.testo {
-webkit-transform: scale(1.0);
-moz-transform: scale(1.0);
-ms-transform: scale(1.0);
-o-transform: scale(1.0);
transform: scale(1.0);}

div.testo h1 {font-size: 16px;}
div.testo h2 {font-size: 14px;}
div.testo  {font-size: 10px;}

</style>
</head>
<body>
<div id="container">
<div class="griglia">
<div class="foto">
<img src="URL immagine"></div>
<div class="testo">
<h1>TITOLO</h1>
<h2>Sottotitolo</h2>
<br>
testo
<br>
testo
<br>
testo
<br>
testo
</div>
</div>
</div>
</body>
</html>

(Codice prelevato da un esempio di http://www.html.it/css/) e modificato da me)

I parametri modificabili sono quelli in rosso, in questo modo:
  • font-family: "Lucida Grande", Verdana, Arial : questi sono i caratteri del testo che appare nella didascalia. Perchè mettere una famiglia di caratteri? Perchè così potete scegliere i caratteri sostitutivi nel caso in cui il pc dell'utente non avesse il font che avete scelto. Potete inserire tutti i font che credete. Il primo, tra virgolette, è la vostra prima scelta. La voce "sans-serif", che viene dopo, rappresenta una famiglia generica. Direi di lasciarla così, o dovrei fare un'altra pagina di spiegazioni solo per i font :-))
  • max-width:  250px: qui dovete mettere esattamente la stessa larghezza dell'immagine che caricherete.
  • auto: con il comando auto, l'immagine e` centrata nella pagina, se lo cancellate, si posizionera` a sinistra. (In Google sites va tolto e il gadget posizionato dopo con gli strumenti appositi).
  • color: white: questo è il colore predefinito del testo. Potete anche dare un colore personalizzato alle singole parti, vi spiegherò dopo come. Il colore va inserito col nome inglese o con il codice web (Editor colori).
  • background-color: transparent: questo è il colore dello sfondo della didascalia, che, ora è trasparente. Potete mettere il colore che preferite, ma dovrete impostare anche il grado di opacità, che influirà su tutto l'insieme di sfondo e testo.
  • opacity:1.0: questo è il grado di opacità della didascalia. La scala va da 0,1 a 1.0. Più alto è il valore, minore è la trasparenza. Ora è impostato sul valore massimo, perchè il colore dello sfondo è già trasparente e volevo che il testo fosse nitido.
  • filter:alpha(opacity=100): questo è sempre il grado di opacità, ma per Internet Explorer, che non supporta opacity. I valori, in questo caso, vanno da 10 a 100. Dovete impostare il valore corrispondente a quello di opacity. Esempio: 0,1 = 10  0,2 =20    0,3 = 30.....fino a 1.0 = 100, come nel codice d'esempio. 
  • div.testo h1 {font-size: 16px;}: è la dimensione dei caratteri del titolo (h1).
  • div.testo h2 {font-size: 14px;}: è la dimensione dei caratteri del sottotitolo (h2).
  • div.testo  {font-size: 10px;}: è la dimensione dei caratteri del testo normale.
  • URL immagine: qui dovete mettere l'indirizzo dell'immagine.
  • <h1>TITOLO</h1>: qui dovete scrivere il titolo che volete dare alla didascalia. Se non volete dare un titolo, potete togliere i tag <h1></h1> e il testo sarà normale.
  • <h2>Sottotitolo</h2>: qui dovete scrivere il sottotitolo della didascalia. Se non volete un sottotitolo, potete togliere i tag <h2></2>.
  • testo: qui dovete inserire il testo normale che desiderate. I tag <br> servono ad andare a capo con il testo normale. Mettendone di più, potete aumentare la distanza tra le righe, anche tra titolo, sottotitolo e testo. Tenete presente che il testo non si adatta automaticamente alla larghezza della didascalia, quindi se dovesse essere troppo lungo, uscirebbe dalla vista, sia in larghezza che in altezza.
Se volete che le parti del testo abbiano colori personalizzati, dovete usare questa stringa:

Per il titolo:
<font color="red"><h1>TITOLO</h1></font>
Per il sottotitolo:
<font color="red"><h2>Sottotitolo</h2></font>
Per il testo normale:
<font color="red">Testo</font>

Come già ripetuto, i colori possono essere inseriti col nome inglese  o col  codice (Editor colori).

Se volete che il titolo della didascalia, abbia un collegamento cliccabile, dovete usare questa stringa:

<a href="URL collegamento" target="_blank"><h1>TITOLO</h1></a>
(Il tag "target="_blank", serve a far aprire il link in una nuova finestra, se non lo desiderate, potete toglierlo.)

Vi faccio, anche, l'esempio di un titolo di colore rosso e cliccabile:
<a href="URL collegamento" target="_blank"><font color="red"><h1>TITOLO</h1></font></a>

Per inserire questo codice in Google sites, bisogna usare il metodo descritto in Come inserire codici e scripts in Google sites.

Questo è tutto.




Aiuta il sito! Condividi questa pagina su:
 Facebook   twitter  Google   Linked  in    

Ti e` stato utile questo argomento?



Continua con: