Jump to content
Fórum Script Brasil
  • 0

Forma suave de mover elementos HTML quando o rato se move por cima deles


Adam Brave
 Share

Question

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

Link to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

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.6k
    • Total Posts
      646.2k
×
×
  • Create New...