Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17562
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Passar o mouse para expandir o banner

16-02-2007 22:34

Bem nesse artigo vou passar um modo de expandir o banner ao passar o mouse, esse efeito geralmente é feito em flash, mas, vou passar uma forma aqui com div e javascript.

Como funciona:
Vamos supor que temos um banner de 468x30 e ao passar o mouse ele expandirá para 468x60 sendo transformado em um link.
O banner tanto 468x30 quanto 468x60 são os mesmos, a diferença é que na hora que você montar o banner, você vai configurar uma parte até 30px de altura e o restante para mostrar quando tiver 60px de altura, veja o código.

1ª parte

<script language="JavaScript"> // criamos as funções para mostrar e não mostrar a div do banner function mostra() { document.getElementById("banner").style.height=60; } function nmostra() { document.getElementById("banner").style.height=30; } </script>

2ª parte

<div style="position:absolute;left:100px;top:100px;width=468;height=30;" onMouseover="mostra()" onMouseout="nmostra()" onClick="window.open('http://www.codigosnaweb.com','blank','')"> <div id="banner" style="cursor:hand;position:absolute;width:468px;height:30px;background:url(banner.gif)"> </div></div>

mude os valores de left e top para posicionar o banner no documento

O que fiz acima foi o seguinte:
O 1º div terá o efeito para aumentar a área do banner e ocultar além de um onClick que irá carregar o site de quem divulgamos em uma nova janela.

O 2º div terá o posicionamento reduzido do banner na qual queremos fazer o efeito, note que o banner na verdade fica como background na div, por isso usei o evento onClick para parecer que não é background e sim um banner comum.
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado