Como criar imagens que aumentam ou diminuem sua altura quando passamos

[cherodogo]

Olá, pessoal:

Estou começando em JavaScript e gostaria de saber como mostrar aquela imagem de propaganda que aparece nos cabeçalhos de diversas páginas, que desliza suavemente para baixo, aumentando de tamanho, quando passamos o mouse sobre ela. Um exemplo está aqui, no topo da página: http://tecnologia.uol.com.br/.

Só JavaScript com temporizadores já é suficiente? Ou também precisa de animação em Flash?

Valeu...

[Willian Gustavo Veiga]

Provavelmente com jQuery ou outra biblioteca JavaScript você consegue tal efeito. Com JavaScript puro também é possível mas fica um pouco mais difícil.

Um abraço.

[jorgeS]

ve este script

<script language="javascript">

<!--

function aumenta(obj){

obj.height=obj.height*2;

obj.width=obj.width*2;

}

function diminui(obj){

obj.height=obj.height/2;

obj.width=obj.width/2;

}

//-->

</script>

<img src="directoria da imagem" width="150" height="150" border="0" onmouseover="aumenta(this)" onmouseout="diminui(this)"/>

[vini_loock]

Para fazer a imagem ir descendo da pra ser em css mesmo, mas para fazer o efeito suave usa javacript.

E para aumentar da para usar o exemplo do jorge, mas ela não vai ter efeito nenhum, simplesmente vai aumentar.

Usando jquery, acho que fica bem mais fácil, você só precisa usar:

setInterval() -- para fazer a imagem descer junto com a página.

E para fazer o efeito dela aumentar, usa-se o metodo animate.

Ex:

setInterval(function(){
var id = ("#id da imagem");
var position = id.position();
if(position.top != 50){
id.animate({"top": "50px"}, "slow");
}
}, 1);

$("#id da imagem").live('mouseover', function(){
$("#id da imagem").animate({"width": "+=100px", "height": "+=100px"}, "slow");
});

$("#id da imagem").live('blur', function(){
$("#id da image").animate({"width": "-=100px", "height": "-=100px"}, "slow");
});

Editado Novembro 27, 2010 por vini_loock