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


Moderador: web

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

Banner expansível em JavaScript efeito

19-03-2011 22:13

A ideia desse script é criar um efeito de banner expansível. Pode ser feito com uma ou duas figuras, nesse exemplo que estou postando será com 2 figuras.

O script faz o seguinte:
Carrega uma imagem pequena, e quando passar o cursor sobre ela troca por uma figura grande, que seria a mesma figura pequena, só que maior, o que vai parecer o efeito de expandir a figura.

Parte em CSS, onde é configurado as características da div que vai a figura pequena

<style> .div { position: absolute; overflow:hidden; z-index: 3000; width: 500px; height: 60px; background-color:#cccccc; } </style>

Parte em JavaScript, com as funções que serão ativadas ao passar e tirar o cursor

<script type="text/javascript"> function Show(elem, height, fig) { elem.style.height = height + "px"; document.getElementById("img").src=fig; };   function Hide(elem, height, fig) { elem.style.height = height + "px"; document.getElementById("img").src=fig; }; </script>

Parte em HTML, com um exemplo de uso

<div style="z-index: 1; height: 60px;"> <div class="div" onmouseover="Show(this, 200, 'fotogrande.jpg');" onmouseout="Hide(this, 30, 'fotopequena.jpg');"> <img id="img" src="fotopequena.jpg"></div> </div>   textos diversos

0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Bing [Bot], Google Adsense [Bot]