Jump to content
Fórum Script Brasil
  • 0

Redimensionar imagem HTML Javascript


Edmar Carvalho
 Share

Question

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 to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0

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 to comment
Share on other sites

  • 0
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 to comment
Share on other sites

  • 0

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 to comment
Share on other sites

  • 0
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 to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0
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 to comment
Share on other sites

  • 0

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 to comment
Share on other sites

  • 0
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 to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share



  • Forum Statistics

    • Total Topics
      149.9k
    • Total Posts
      646.8k
×
×
  • Create New...