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


Moderador: web

 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 237
Localização: Florianópolis/SC
Contato:

menu com efeito de transição com apenas uma img

23-01-2008 17:54

vendo o topico
http://www.codigosnaweb.com/forum/viewtopic.php?p=4830

me veio uma dúvida, vi em site e agora fiquei curioso. usando uma unica img, ele tem efeitos para qdo se passa o mouse sobre os links

a img é +/- assim:
Imagem

no topico que citei acima tem um posicionamento do background, mas como posicionar o inicio widght, inicio height e termino da img na css?

na img ja da pra perceber como deve ser, ao passar o mouse sobre o link, aquela parte referida da img se posiciona no conteudo da div (acho que foi usado uma div).

assim o menu pode ser bonito, com imagem bem legal, e ser rapido.
0
MIDZ.com.br
http://www.midz.com.br
Soluções Web
 
Avatar do usuário
ADMIN
ADMIN
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:

menu com efeito de transição com apenas uma img

23-01-2008 18:10

Montei uma base, veja

CSS
<style type="text/css"> .m1{ width:85px; height:30px; background:url(dupla.gif); background-repeat:no-repeat; background-position: 0px 0px; } .m_1{ width:85px; height:30px; background:url(dupla.gif); background-repeat:no-repeat; background-position: 0px -30px; } .m2{ width:85px; height:30px; background:url(dupla.gif); background-repeat:no-repeat; background-position: -78px 0px; } .m_2{ width:85px; height:30px; background:url(dupla.gif); background-repeat:no-repeat; background-position: -78px -30px; } .m3{ width:85px; height:30px; background:url(dupla.gif); background-repeat:no-repeat; background-position: -160px 0px; } .m_3{ width:85px; height:30px; background:url(dupla.gif); background-repeat:no-repeat; background-position: -160px -30px; } .m4{ width:100px; height:30px; background:url(dupla.gif); background-repeat:no-repeat; background-position: -245px 0px; } .m_4{ width:100px; height:30px; background:url(dupla.gif); background-repeat:no-repeat; background-position: -245px -30px; } </style>

HTML
<div class="m1" onmouseover="this.className='m_1'" onmouseout="this.className='m1'" style="float:left;"></div> <div class="m2" onmouseover="this.className='m_2'" onmouseout="this.className='m2'" style="float:left;"></div> <div class="m3" onmouseover="this.className='m_3'" onmouseout="this.className='m3'" style="float:left;"></div> <div class="m4" onmouseover="this.className='m_4'" onmouseout="this.className='m4'" style="float:left;"></div>

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 237
Localização: Florianópolis/SC
Contato:

menu com efeito de transição com apenas uma img

23-01-2008 18:31

isto ai, ficou show de bola, minha duvida era pra determinar o fim da parte usada da img, mas determinando o tamanho da div com o mesmo tamanho da img, ta resolvido.

show de bola, valeu
0
MIDZ.com.br
http://www.midz.com.br
Soluções Web
 
Avatar do usuário
ADMIN
ADMIN
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:

menu com efeito de transição com apenas uma img

23-01-2008 20:09

:D
0
A melhor hospedagem para o seu site HostGator!

Quem está online

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