Prezados, boa tarde,
me ajudem com o código da introdução do livro por favor.
A intenção é redimensionar o tamanho da imagem de forma proporcional ao tamanho da janela.
Já fiz de tudo e não funciona como na resposta do livro. O comportamento de a imagem diminuir não acontece. Quando eu fixo um valor, como 50 px por exemplo, aí funciona.
Já coloquei o tamanho da janela do cliente no console e o valor é retornado.
Por favor, o que há de errado na function resizeRock no código abaixo ?
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>iRock - A rocha virtual de estimação</title>
<script type="text/javascript">
var userName;
function greetUser() {
alert("Olá, eu sou sua pedra de estimação!");
};
function touchRock() {
if (userName) {
alert("Eu gosto de atenção " + userName + ". Obrigado!!!");
}
else {
userName = prompt("Qual o seu nome?", "Digite seu nome")
if (userName) {
alert("Bom conhecer você " + userName + ".");
}
}
document.getElementById("rockImg").src = "rock_happy.jpg"
setTimeout("document.getElementById('rockImg').src='RochaSolitaria.png';", 3000);
};
function resizeRock() {
document.getElementById("rockImg").style.height =
(document.body.clientHeight - 100) * 0.5;
}
</script>
</head>
<body onload="resizeRock(); greetUser();">
<div style="margin-top:100px; text-align:center">
<img id="rockImg" src="Rock.png" alt="iRock" style="cursor:pointer"
onclick="touchRock()"/>
</div>
</body>
</html>