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


Moderador: web

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

Galeria de fotos com descrição

01-02-2007 17:39

Esse artigo mostra como fazer um tipo de galeria de fotos, onde, ao passar o mouse sobre uma das fotos mostre uma descrição, vamos ao código:

1ª parte ( CSS )
Definimos aqui como ficará o estilo da imagem ao passar o mouse, e do texto padrão.
<style> .inativo{ text-align:center; border:1px solid #cccccc; background-color:#fefefe; width:120px; padding:15px; } .ativo{ text-align:center; border:1px solid #ffffff; width:120px; padding:15px; } .t{font-family:tahoma;font-size:9pt;color:#696969;} </style>

2ª parte ( JavaScript )
Definimos aqui o script que ativa/desativa as funções no link
<script> function mostra(a1,a2) { document.getElementById(a2).innerHTML = a1; } </script>

3ª parte ( Tabela )
Aqui mostramos os exemplos do script, note que cada tabela possui uma div numerada, 1, 2, 3, para adicionar mais, siga a ordem.
<table align=left><tr> <td><span class="ativo" onMouseOver="mostra('<font class=\'t\'>meu texto 1<br>complemento 1</font>','div1');this.className='inativo'" onMouseOut="mostra('','div1');this.className='ativo'"> <a href=""><img src="banner.gif" border="0" width="120" height="60"></a> <div style="width:120"><div id="div1"></div></div> </span></td> </tr></table> <table align=left><tr> <td><span class="ativo" onMouseOver="mostra('<font class=\'t\'>meu texto 2<br>complemento 2</font>','div2');this.className='inativo'" onMouseOut="mostra('','div2');this.className='ativo'"> <a href=""><img src="banner.gif" border="0" width="120" height="60"></a> <div style="width:120"><div id="div2"></div></div> </span></td> </tr></table> <table align=left><tr> <td><span class="ativo" onMouseOver="mostra('<font class=\'t\'>meu texto 3<br>complemento 3</font>','div3');this.className='inativo'" onMouseOut="mostra('','div3');this.className='ativo'"> <a href=""><img src="banner.gif" border="0" width="120" height="60"></a> <div style="width:120"><div id="div3"></div></div> </span></td> </tr></table>

0
A melhor hospedagem para o seu site HostGator!

Quem está online

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