JavaScript - #Aula05 parte 05 - Tamanho da Imagem

Tamanho da Janela
 Você já parou para pensar no tamanho da sua janela?
 E se eu disser que isso é algo importante para o seu site, ou seu joguinho de navegador,
você acreditaria?
 Bom vamos conversar nessa aula um pouco sobre isso, pois pense quando você está
desenvolvendo uma aplicação, seja ela para Desktop ou para Web, você de inicio
sempre pensa, se eu desenvolver e ele funcionar está ok, mas não é bem assim, para
você atingir o máximo de usuários possíveis você deve começar a pensar primeiramente
pelo tamanho do seu software e para a Web isso tem que ser pensado também, afinal
por quantos dispositivos hoje podemos acessar a Web, celular, tv, pc, notebook,
videogames, e tantos outros que surgem a cada dia no mercado, e você já viu o
tamanho das janelas de cada uma dessas opções, pois bem, o celular e pequeno no pc,
pode ser grande, na tv também, mas como fazer o seu site ter o mesmo tamanho para
qualquer dispositivo para que ele se adeque a este, isso mesmo estamos falando sobre
sites responsivos, ou seja, se adequa ao tamanho da tela do dispositivo, hoje vamos
falar sobre isso.

Alterando O tamanho da Sua Imagem
 Para alterar o tamanho da nossa imagem, podemos criar uma função no nosso
JavaScript que realiza essa alteração, de inicio vamos alterar apenas o tamanho da
imagem e pra isso vamos colocar um código JavaScript dentro da função para
fazer com isso aconteça com a imagem, veja:
 Document.getElementById(“rockImg”).style.height = “100px”;

Código da Aula
 <html>
 <head>
 <title>iRock - A rocha virtual de estimação</title>
 <script type="text/javascript">
 function resizeRock(){
 document.getElementById("rockImg").style.height = "300px";
 }
 function touchRock(){
 var userName = prompt("Qual é o Seu Nome?", "Digite o seu nome aqui");

Cont.. Código da Aula
 if(userName){
 alert("É tão bom encontrar você por aqui - " + userName + ".");
 document.getElementById("rockImg").src = "rock_happy.png";
 setTimeout("document.getElementById('rockImg').src = 'rock.png';",0.1 * 60 *1000);
 }

 }
 </script>
 </head>

 <body onload="resizeRock(); alert('Olá, eu sou sua rocha de estimação, que bom que você veio me visitar'); ">
 <div style ="margin-top:100px; text-align:center">
 <img id="rockImg" src="rock.png" alt="iRock" style="cursor:pointer" onclick="touchRock()"/>
 </div>
 </body>
 </html>

Conheça nosso canal no Youtube
 Canal:
 https://www.youtube.com/channel/UC7FWW7I5ZW5T9V7dQnEtD7A

Referencia
 Recomendamos a leitura
 MORRISON, Michael. Use a Cabeça JavaScript. Editora Alta Books Ltda, 2008.

JavaScript - #Aula05 parte 05 - Tamanho da Imagem

Mais conteúdo relacionado

Destaque

Mais de Erick L. F.

JavaScript - #Aula05 parte 05 - Tamanho da Imagem