Può a volte capitare, nello sviluppo di un sito web, di dover venire a che fare con concetti legati al mondo della carta stampata piuttosto che di Internet; un esempio potrebbe essere quello di richiedere delle didascalie aggiuntive alle immagini posizionate nei nostri documenti web.
Con l’utilizzo delle tecnologie multimediali il problema risulta quantomeno marginale, infatti, come sappiamo, si può far uso dell’alt all’interno della dichiarazione del tag <img> per far visualizzare un elemento sostitutivo dell’immagine.
Ma se volessimo applicare delle didascalie testuali alle immagini, come procedere?
Per iniziare decidiamo di utilizzare i CSS, e precisamente di fare adoperare i DIV class. Questa scelta ci permette di assegnare stili differenti a tag identici, come quello per il richiamo delle immagini.
Considerando che le immagini all’interno di un sito web possono essere posizionate sia a destra che a sinistra del testo, ho pensato di proporre il medesimo comportamento alle immagini didascaliche, ma naturalmente richiamate con nomi distinti.
[code lang=”css”]
div.thumb_l, div.thumb_r {
float:left;
background-color:#eee;
padding:5px;
margin:0 10px 5px 0;
}
[/code]
I due DIV class utilizzati qui sopra sono rispettivamente riferiti alle didascalie sinistra e destra; le caratteristiche sono estremamente semplici, forse l’unica nota può essere enunciata per interesse nei confronti del padding, che mi permette, così impostato, di ottenere una sorta di effetto cornice, successivamente utile per la didascalia.
Giunti a questo punto dobbiamo lavorare sui particolari delle immagini, giusto perché un bel aspetto non guasta mai nell’esposizione di un contenuto. Pertanto impostiamodei controlli sul bordo delle immagini pubblicate, così facendo aumenteremo l’effetto “didascalia”.
[code lang=”css”]
div.thumb_l img, div.thumb_r img {
border:1px solid #ccc;
}[/code]
Un importante passaggio può essere quello di ottimizzare il tutto perfezionando il controllo nei confronti delle thumbs impaginate a destra, infatti con le regole soprascritte il tag margin e il float sono da “capovolgere”.
[code lang=”css”]
div.thumb_r {
float:right;
margin:0 0 5px 10px;
}[/code]
Siamo quasi giunti alla fine, e allora dobbiamo lavorare sul testo che apparirà come aggiunta di didascalia sotto le nostre immagini; per fare questo ho creato un nuovo DIV class, con caratteristiche proprie.
[code lang=”css”]
div.caption {
font: Arial, Helvetica, sans-serif;
font-size: 70%;
color:#999;
margin-top: 5px;
}[/code]
L’ultimo passaggio da compiere è quello riguardante il richiamo corretto all’interno del nostro documento web, questo si può semplificare nel modo seguente.
[code lang=”html”]
<div class="thumb_l"><img src="x.gif" alt="Descrizione" />
<div class="caption">Testo didascalia</div>
</div><!– end .thumb_l –>
<p>Lorem ipsum dolor sit amet etc …</p>
[/code]
Se avete seguito correttamente le istruzioni, il risultato che dovreste aver ottenuto non sarà dissimile da quello che viene pubblicato in questo esempio.
3 Commenti
Domenico
Bell’articolo complimenti…ma se l’immagine fosse invece allineate al centro?
Egidio Murru
@Domenico Non dovresti avere problemi particolari; troveresti la didascalia sotto l’immagine allineata al centro.
Pingback: HTML link pop up su immagine - AlterVista | Spazio web gratis, hosting free php mysql