domingo, 11 de setembro de 2011

Efeito "sacode" em links e imagens



O efeito sacudido é um efeito que ao se fazer um clique sobre um link uma imagem estes se movem de um lado para o outro:

CLIQUE AQUI


Para conseguir este efeito basta fazer o seguinte;
Antes de </head> cole:

<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>
<!-- Prototype y Scriptaculous-->
<script type='text/javascript'>
function ShakeEffect(element){
new Effect.Shake(element);
}

</script>


Por último cole este código na caixa de suas postagens para aplicar o efeito, caso queira uma imagem com um link cole este:

<a href="URL do Link" onclick="ShakeEffect(this);">
<img src="URL da imagem" />
</a>


Para um link de texto use este:

<a href="URL do Link" onclick="ShakeEffect(this);">
Texto do Link
</a>

Troque o URL do Link e da imagem nos lugares destacados em negrito. Se quiser que este efeito se aplique ao se passar o cursor por cima e não ao clicar, troque onclik por isto:

onmouseover

4 comentários:

Anônimo disse...

coloquei este gadjet no meu blog,porem quando eu clico nele ele redireciona para a pagina.eu queria que o link fosse aberto em outra aba.Pode me ajudar?
Obrigado

Danilo disse...

Não estou conseguindo, eu coloquei tudo no lugar como você explicou, mas quando eu cliquo na imagem, não acontece nada.
Ps: estou tentando fazer isso em um gadget (HTML/JavaScript)

Danilo disse...

O meu blog é http://waterpokemons.blogspot.com
A imagem está no mural!

Unknown disse...

Ola olha gostei muito das suas dicas o passo a passo esta otimo parabens..

Artigos Relacionados

Related Posts Plugin for WordPress, Blogger...