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.

div.thumb_l, div.thumb_r {
  float:left;
  background-color:#eee;
  padding:5px;
  margin:0 10px 5px 0;
}

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”.

div.thumb_l img, div.thumb_r img {
  border:1px solid #ccc;
}

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”.

div.thumb_r {
  float:right;
  margin:0 0 5px 10px;
}

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.

div.caption {
  font: Arial, Helvetica, sans-serif;
  font-size: 70%;
  color:#999;
  margin-top: 5px;
}

L’ultimo passaggio da compiere è quello riguardante il richiamo corretto all’interno del nostro documento web, questo si può semplificare nel modo seguente.

<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>

Se avete seguito correttamente le istruzioni, il risultato che dovreste aver ottenuto non sarà dissimile da quello che viene pubblicato in questo esempio.

Se ti è piaciuto questo articolo puoi commentare oppure condividerlo online tramite i social network.
Se invece mi adori e non vuoi perderti nemmeno uno dei miei post puoi iscriverti al Feed RSS.