Adicionar legendas de imagens, atributo alt com javascript

Comentem galera!

Vi que a série de posts “Criando um plugin jQuery” SimplePlaceHolder, foi bem aceita. Gostaria de opiniões, sobre o que devo escrever, ou onde é a dificuldade de vcs.

Vamos lá.

Problema:

Possuo um conjunto de miniatura de imagens no HTML.
Gostaria de uma rotina que adicionasse automaticamente uma legenda, para cada uma dessas imagens, baseada no atributo alt da tag img.


Por partes novamente:

Possuo um conjunto de miniatura de imagens no HTML.

<html>
<head>
	<style type="text/css">
	* { margin: 0; padding: 0; list-style: none; }
	body { font: 12px Arial, Verdana, sans-serif; }
	#fotos {
		width: 630px;
		margin: 0 auto;
	}
	#fotos li {
		float: left;
		margin: 0 10px 10px 0;
		background: #efefef;
		padding-bottom: 25px;
		position: relative;
	}
	#fotos a {
		width: 200px;
		height: 150px;
		overflow: hidden;
		display: block;
	}
	#fotos img {
		border: none;
	}
	#fotos p {
		position: absolute;
		bottom: 5px;
		left: 10px;
	}
	</style>
	<script type="text/javascript">

	</script>
</head>
<body>
	<ul id="fotos">
		<li><a href="images/01.jpg"><img src="images/thumbs/01.jpg" alt="Céu" /></a><p></p></li>
		<li><a href="images/02.jpg"><img src="images/thumbs/02.jpg" alt="Queda de agua" /></a><p></p></li>
		<li><a href="images/03.jpg"><img src="images/thumbs/03.jpg" alt="Universo" /></a><p></p></li>
		<li><a href="images/04.jpg"><img src="images/thumbs/04.jpg" alt="Praia" /></a><p></p></li>
		<li><a href="images/05.jpg"><img src="images/thumbs/05.jpg" alt="Montanhas" /></a><p></p></li>
		<li><a href="images/06.jpg"><img src="images/thumbs/06.jpg" alt="Verde, agua" /></a><p></p></li>
	</ul><!-- /foto -->
</body>
</html>

Legal, o html está ali.
Todo preparado, só precisamos fazer a nossa rotina javascript que vai:

adicionasse automaticamente uma legenda


Como sempre, para mantermos o nosso script de acordo com as boas normas de desenvolvimento javascript, não vamos misturar javascript com o html. Vai ficar tudo na seção HEAD do documento, e sem declarar eventos inline.

Sabemos que o documento é carregado de cima para baixo pelo navegador.
Então, qndo o navegador chegar nas tags <script> dentro do <head>, ainda não temos nenhum html, e portanto, precisamos dizer que o nosso script precisa esperar o documento carregar, para só então começar a tentar ler o DOM.

Fazemos isso, assim:

	window.onload = function(){

	}

ou seja, esperando o evento .onload do objeto window.
Quando então esse evento for disparado(o documento, imagens, css, scripts terminarem de carregar), disparamos uma function.

Olhando nosso HTML:

	<ul id="fotos">
		<li><a href="images/01.jpg"><img src="images/thumbs/01.jpg" alt="Céu" /></a><p></p></li>
		<li><a href="images/02.jpg"><img src="images/thumbs/02.jpg" alt="Queda de agua" /></a><p></p></li>

Vemos que podemos limitar a ação do script, às imagens que estão dentro dos LIs, que estão dentro do UL#fotos:

var lis =  document.getElementById('fotos').getElementsByTagName('li');

com calma.
Criamos uma variavel lis, usando a palavra chave var.
Daí, atribuimos a essa variavel, o retorno do encadeamento.

document.getElementById('fotos').getElementsByTagName('li');

Apartir do objeto document, buscamos um elemento com id=”fotos”, dai então dentro, desse objeto que tinha id=”fotos”, buscamos todos os elementos, que tenham como tag name a string li.

Percorremos o DOM, e agora temos em lis, um array de objetos

alert( lis );//[object HTMLCollection]

, onde cada um é:

alert( lis[i] );//[object HTMLLIElement]

.

Basta iterar sob esse array:

		for( var i=0; i<lis.length; i++ ){

		}

Lembrando que arrays em php, javascript, java.. começam na posição 0.(só tem uma linguagem que esqueci o nome que não é assim, começa no 1).
lis.length, nos retorna o número de elementos do nosso conjunto.
Nosso loop, vai percorrer da primeira posição, até a última. Bem simples.

Daí, só precisamos escrever no HTML.
Veja que tem um <p> ali estrategicamente posicionado para conter a legenda.
basta:

lis[i].getElementsByTagName( 'p' )[0].innerHTML

, atribuir à propriedade .innerHTML, do parágrafo, do nosso li corrente, oque queremos.

Veja que tem aquele [0], ali. Quer dizer que vamos trabalhar apenas com a primeira posição do array que getElementsByTagName() retornar.(mesmo que só haja um elemento, ele vai retornar um array com esse elemento).

De forma análoga, basta acessarmos o atributo .alt, das nossa imagem que está dentro do nosso li corrente:

lis[i].getElementsByTagName( 'img' )[0].alt

E está feito:

	window.onload = function(){
		var lis =  document.getElementById('fotos').getElementsByTagName('li');

		for( var i=0; i<lis.length; i++ ){
			lis[i].getElementsByTagName( 'p' )[0].innerHTML = lis[i].getElementsByTagName( 'img' )[0].alt;
		}
	}

Opinem! mandem sugestões de tutoriais, scripts, críticas, ou algum ponto que não expliquei direito.

TestPlan
Notar que enqnto as imagens estão carregando, não existe nenhum texto embaixo de cada uma delas.
E abrindo o código fonte html gerado (Ctrl + U), também não tem nada ali dentro da tag p.

Assim que as imagens terminarem de carregar, vai aparecer a legenda.

Demonstração

5 Comments

  1. Em delphi o indexe começa no 1.
    Se acessar o 0, vc pega endereço da array na RAM.

  2. Muito bom cara, simples e funcional. Tá de parabéns.

  3. Luan Barros De Almeida

    janeiro 9, 2016 at 21:44

    salve brunão meu nome é luan e gostaria de pedir um mega favorzão eu tenho essa estrutura pronta de um menu de cores de fundo atraves do clique

    Documento sem título

    function fundo (){
    document.bgColor=cor
    
    
    }
    
    .azul {
    	margin:2px;
    	float:left;
    	height:20px;
    	width:20px;
    	background-color:#0000FF;
    }
    
    .amarelo {
    	
    	margin:2px;
    	float:left;
    	height:20px;
    	width:20px;
    	background-color:#FFFF00;	
    }
    
    .verde {
    	margin:2px;
    	float:left;
    	height:20px;
    	width:20px;
    	background-color:#00FF00;
    }
    
    .vermelho {
    	margin:2px;
    	float:left;
    	height:20px;
    	
    	width:20px;
    	background-color:#FF0000;	
    }
    
    
    

    agora eu queria colocar um texto de legenda SIMILAR ao do atributo ALT da tag pra quando eu simplesmente passar o mouse ou as vezes clicar no quadradinho da cor ele mostrar o nome da cor que vou clicar lembrando que a tag img foi so um exemplo pra ajudar o que preciso a tag img ela nao tem e nem tera nd haver com esse meu codigo eu necessito dessa informação pra um estudo que vou começar a fazer de AJAX ja que quando aprendi esse codigo foi em AJAX

    obgd

    luan

  4. Bruno, como criar um script para esse html?

Deixe uma resposta

Your email address will not be published.

*