18 de jul de 2013

Utilizando o atributo ALT da imagem como legenda

Imagine a seguinte situação: Você precisa inserir várias imagens em uma página, com uma legenda abaixo de cada uma delas.

O modo convencional, seria inserir um abaixo de cada imagem e posiciona-los via CSS, mas pesquisando um pouco, vi uma forma diferente de se fazer isso... A forma convencional é bem simples, mas é legal variar um pouco, veja só como fiz:

Confira o Jscript comentado abaixo, claro, para funcionar, não deixe de inserir alguma versão da biblioteca JQuery em sua página.


$(document).ready(function(){
$("img.legenda").each(function(){
          var title = this.alt;
          $(this).after('
'+ title +'
'); }); });

Esse script simplesmente diz que todas as imagens que forem da classe "legenda" terão uma div (criada automaticamente) embaixo delas exibindo seu texto ALT como legenda. Você poderá personalizar a posição, cores, tamanho, etc, da classe "stap-caption" via css tranquilamente, façam seus testes!

Um comentário: