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

Redimensionar imagem HTML Javascript

Edmar Carvalho

Perguntado por Edmar Carvalho,

 Share

Pergunta

Edmar Carvalho

Edmar Carvalho

Postado
Postado

Bom dia pessoal! 

Ainda sou leigo em HTML e Javascript e por esse motivo não estou conseguindo criar uma página com HTML e Javascript que tenha os seguintes
elementos e ações:
1-Contenha uma imagem, 2 caixas de texto e um botão(essa eu consegui...)
2-Ao clicar no botão, a imagem deve ser redimensionada para os tamanhos
especificados nas caixas de texto, sendo uma caixa para altura da imagem
e outra para largura(Essa parte é que me trava, não consigo fazer.)

Vejam: 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>Redimensionar</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="generator" content="Geany 1.24" />
</head>

<body>
    <script>
        function mudarimagem(){
        document.getElementById("imagem").src="imagemqualquer.jpg";
    }
    </script>
    <img src="imagemqualquer.jpg" id="imagem" width="600px" height="400px">
    <form>
    Altura:
    <input name="altura" type="text" tabindex="1" size="15">
    Largura:    
    <input name="largura" type="text" tabindex="1" size="15"> 
    <input type="button" value="redimensionar" onClick="mudarimagem()">
    </form>
    </body>

</html>

Link para o comentário
Compartilhar em outros sites

11 respostass a esta questão

Posts Recomendados

  • 0
Stoma

Stoma

Postado
Postado

Olá.

Na função mudarimagem você precisa pegar os valores que estão nos campos altura e largura, e configurá-los na imagem, exemplo: 

var altura = document.getElementsByName("altura")[].value;
document.getElementById("imagem").style.height = altura+"px";

var largura = document.getElementsByName("largura")[].value;
document.getElementById("imagem").style.width = largura+"px";

 

Link para o comentário
Compartilhar em outros sites
  • 0
Edmar Carvalho

Edmar Carvalho

Postado
  • Autor
Postado
12 horas atrás, Stoma disse:

Olá.

Na função mudarimagem você precisa pegar os valores que estão nos campos altura e largura, e configurá-los na imagem, exemplo: 


var altura = document.getElementsByName("altura")[].value;
document.getElementById("imagem").style.height = altura+"px";

var largura = document.getElementsByName("largura")[].value;
document.getElementById("imagem").style.width = largura+"px";

 

Obrigado por responder Stoma... Eu tentei segui sua dica... Mas acho que ainda estou fazendo algo errado.  Poderia por favor, mostrar como ficaria no código inteiro. Veja:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>Prática</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="generator" content="Geany 1.24" />
</head>

<body>
    <script type="text\javascript">
        function mudarimagem("altura, largura"){
        document.getElementById("imagem").src="imagemqualquer.jpg";
        
        var altura = document.getElementsByName("altura")[].value;
        document.getElementById("imagem").style.height = altura+"px";

        var largura = document.getElementsByName("largura")[].value;
        document.getElementById("imagem").style.width = largura+"px";
    }
    </script>
    <img src="imagemqualquer.jpg" id="imagem" width="600px" height="400px">
    <form>
    Altura:
    <input name="altura" type="text" tabindex="1" size="15">
    Largura:    
    <input name="largura" type="text" tabindex="1" size="15"> 
    <input type="button" value="redimensionar" onClick="mudarimagem()">
    </form>
    </body>

</html>

Link para o comentário
Compartilhar em outros sites
  • 0
Stoma

Stoma

Postado
Postado

O fórum está com um problema, ele remove o caractere 0 (zero) dos códigos... corrige aí essas duas linhas:

var altura = document.getElementsByName("altura")[].value;

var largura = document.getElementsByName("largura")[].value;

Removeu novamente ahhahaha

O certo é assim:  [].value;

[0].value ;

[].value; 

[0].value;

 

Link para o comentário
Compartilhar em outros sites
  • 0
Edmar Carvalho

Edmar Carvalho

Postado
  • Autor
Postado
3 horas atrás, Stoma disse:

O fórum está com um problema, ele remove o caractere 0 (zero) dos códigos... corrige aí essas duas linhas:

var altura = document.getElementsByName("altura")[].value;

var largura = document.getElementsByName("largura")[].value;

Removeu novamente ahhahaha

O certo é assim:  [].value;

[0].value ;

[].value; 


[0].value;

 

Fiz o que me pediu.. kkkkkkkkkkkkkkkkk.. Mas ainda não dei certo.. Não entendo.. Mas vou continuar a tentar.. Obrigado..

Link para o comentário
Compartilhar em outros sites
  • 0
Edmar Carvalho

Edmar Carvalho

Postado
  • Autor
Postado
15 horas atrás, Stoma disse:

O que acontece depois de adicionar esse código? Aparece alguma mensagem de erro?

No Google Chrome, acesse a página, aperte F12, clique na aba Console e vê se aparece alguma mensagem lá...

Aparece sim.. Uncaught ReferenceError: mudarimagem is not defined

Acho que estou fazendo o código errado. A função mudar imagem não redimensiona. Digito os valores nos campos altura e largura, mas nada acontece.

Teria como você fazer o código com uma imagem qualquer ai.. E mandar pra mim ver aqui?

 

Link para o comentário
Compartilhar em outros sites
  • 0
Stoma

Stoma

Postado
Postado

Então, sua função tem que estar assim:

<script type="text/javascript">
function mudarimagem(){
    document.getElementById("imagem").src="imagemqualquer.jpg";
    
    var altura = document.getElementsByName("altura")[0].value;
    document.getElementById("imagem").style.height = altura+"px";
    
    var largura = document.getElementsByName("largura")[0].value;
    document.getElementById("imagem").style.width = largura+"px";
}
</script>

Link para o comentário
Compartilhar em outros sites
  • 0
Edmar Carvalho

Edmar Carvalho

Postado
  • Autor
Postado
1 hora atrás, Stoma disse:

Então, sua função tem que estar assim:

<script type="text/javascript">
function mudarimagem(){
    document.getElementById("imagem").src="imagemqualquer.jpg";
    
    var altura = document.getElementsByName("altura")[0].value;
    document.getElementById("imagem").style.height = altura+"px";
    
    var largura = document.getElementsByName("largura")[0].value;
    document.getElementById("imagem").style.width = largura+"px";
}
</script>

Cara, você é fera! Deu certo... Eu vou procurar onde errei. Poxa cara, muito obrigado.  

Cara, o erro estava na "\" que coloquei invertida no  <script type="text\javascript">.. que falta de atenção.. O correto é  <script type="text/javascript">

Obrigado irmão.. Muito grato!

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.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

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