Ir para conteúdo
Fórum Script Brasil
  • 0

capturar largura e altura da imagem clicada


alexandre henrique

Pergunta

Olá amigos estou tentando capturar o tamanho real (width, height) das imagens que compõem meu álbum de fotos.
Ao clicar na imagem preciso capturar altura e largura,  já tentei de várias formas mas, o valor que retorna não é o tamanho real, apenas é repetido o valor da primeira imagem do array;
Veja online: http://www.via85.tk/photos/

As 3 imagens do álbum têm os  tamanhos abaixo que preciso capturar:
 

Natural
200 x 252
259 x 194
1024 x 683


Meu código está assim:

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Album</title>
		<style>
			.img{
			height:80px;
			float:left;
			margin:1px;
			}
			.imgBig{
			width:auto;
			height:300px;
			float:left;
			display:block;
			}
		</style>
	</head>

	
	<body>
		<div id="boxAlbum">
			<script>
				var path = "img/";
				
				var img = ["panicat.jpg","por.jpg","azul.jpg"];
				
				var i = 0;
				var tam = img.length; 
				
				function mostraImagem(){
					while (i < tam) {
						document.write('<img class="img" onclick="abreImg(alt);" alt="' +img[i]+ '" id="imagem" src="' +path+img[i]+ '">');
						i++;	
					}	
				}
			</script>
		</div>
		
		<!-- lista miniaturas -->
		<script>mostraImagem();</script>
		<!-- Exibe imagem ampliada -->
		<script>document.write('<img class="imgBig" id="imgBig" src="">');</script>
		
	<script>
	function abreImg(valor) {
		var img = document.getElementById('imagem').innerHTML=valor;
		var altura = document.getElementById("imagem").height;
		var largura = document.getElementById("imagem").width;
		alert(img + "\nAltura: "+altura+"\nLargura: "+largura);
	}
	</script>	
		
	</body>
	
</html>	

 

Link para o comentário
Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

  • 0

Eu fiz assim e testei no Firefox, Opera e IE11:

<script>
function dimensoes(t){
	var w = t.naturalWidth;
	var h = t.naturalHeight;
	alert("Altura: "+w+"\nLargura: "+h);
}
</script>
<img src="urldaimagem" onclick="dimensoes(this);" width="10" height="10" />

 

Editado por RpgBoss
Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...