Boas,
Sou novo na programação de páginas web em html e javascript e estou a criar uma página pessoal. Estou a testar várias coisas e gostaria de criar alguns efeitos habituais em páginas que se vai vendo por aí como por exemplo fazer com que um elemento, como uma imagem por exemplo, se mova quando o rato passa sobre ela. Para isto implementei o seguinte código:
<script>
function hovermouse(x) {
x.style.height = "113px";
x.style.width = "113px";
}
function normalImg(x) {
x.style.height = "80px";
x.style.width = "80px";
}
</script>
Este código, em conjunto com a tag <img> onde chamo as funções apresentadas em cima, permite obter um efeito similar ao pretendido.
<img onmousemove="hovermouse(this)" onmouseout="normalImg(this)" src="images/snoopy.gif" alt="HobbiesButton" width="80" height="80">
O problema desta abordagem é que ela é um pouco grosseira, dado que simplesmente aumenta o tamanho da imagem mas de forma muito brusca fazendo com que toda a página se mova simultaneamente o que se torna incomodativo. Alguém me consegue indicar uma outra forma de fazer este efeito mas de maneira mais... "elegante" e mais suave?
Obrigado