2 de jan de 2012

Como fazer um menu com imagens e rollover-Duas opções



Pessoal o primeiro tutorial eu aprendi no Menina Nerd, é bem complicado então vamos começar pelo primeiro jeito ok? Vamos lá!
Clique no icone leia mais para ver o resto do post.

Primeiro passo - Primeiro faça um menu rollover, ou seja faça a imagem, ela deve ser o menu inteirinho e as palavras devem ficar alinhadas direitinho, uma em baixo da outra, assim:
obs.: é apenas um exemplo.


 Bem primeiro abra o bloco de notas porque o código é enormeeee! Substitua oque está de rosa. Vamos ao primeiro:

#menu{
margin-top:0px;
position:relative;
width:LARGURA DA IMAGEM px;
height: ALTURA DA IMAGEM (ou seja a metade da altura) px;
background: url(URL DA IMAGEM) no-repeat 0 0;
}
#menu ul{
list-style:none;
text-indent:-9999em;
}
#menu li{
position:absolute;
top:0;
height:COLOQUE NOVAMENTE A LARGURA DA IMAGEM px;
}
#menu li a{
display:block;
text-decoration:none;
width:100%;
height:100%;
top:0;
}
#menu li a span{
position:absolute;
display:block;
width:100%;
height:100%;
top:0;
}
Agora o código do link, abra mais um bloco de notas, lá vai o código:

#um{
width: LARGURA DO ESPAÇO DO PRIMEIRO LINK px;
left:0;
}
#dois{
width: LARGURA DO ESPAÇO DO SEGUNDO LINK px;
left: MESMA LARGURA DO ESPAÇO DO PRIMEIRO LINK px;
}
#tres{
width: LARGURA DO ESPAÇO DO TERCEIRO LINK px;
left: SOMA DOS VALORES WIDHT E LEFT ANTERIOR px;
}
#quatro{
width: LARGURA DO QUARTO LINK px;
left:  SOMA DOS VALORES WIDHT E LEFT ANTERIOR px;
}
#cinco{
width: LARGURA DO QUINTO LINK px;
left:  SOMA DOS VALORES WIDHT E LEFT ANTERIOR px;
}
#seis{
 width: LARGURA DO SEXTO LINK px;
left:  SOMA DOS VALORES WIDHT E LEFT ANTERIOR px;
}
Agora vamos entender essas coisas de LARGURA DE TAL LINK , veja a imagem a seguir e entenda:


Agora para saber a largura do link abra a foto que você fez no Photoscape assim:
clique nela para ver o tamanho



Apos selecionar cada link clique em salvar area cortada e vá salvando cada pedacinho de imagem.
#um a span{
background:url (URL DA IMAGEM) no-repeat 0 0;
}
#dois a span{
background:url (URL DA IMAGEM) no-repeat -MESMO VALOR LEFT DE DOIS{px 0;
}
#tres a span{
background:url (URL DA IMAGEM) no-repeat -MESMO VALOR LEFT DE TRES{px 0;
}
#quatro a span{
background:url (URL DA IMAGEM) no-repeat -MESMO VALOR LEFT DE QUATRO{px 0;
}
#cinco a span{
background:url (URL DA IMAGEM) no-repeat -MESMO VALOR LEFT DE CINCO{px 0;
}
#seis{
background:url (URL DA IMAGEM) no-repeat -MESMO VALOR LEFT DE SEIS{px 0;
}
Hospede sua imagem em algum lugar por exemplo Tinypic  ou Image Shack, e substitua o URL DA IMAGEM pelo url da imagem mas não retire o sinal - ok? Lembrando que se vc tiver mais ou menos links acrescente ou retire nos códigos.

Agora o código é da parte do link diferente, ou seja repita o processo, porém com a segunda parte da sua imagem.
#menu ul li a:hover{
z-index:1000;
}
#um a:hover span{
background:url(URL DA IMAGEM) no-repeat 0 -ALTURA DO SEU MENU OU SEJA, METADE DA ALTURA DELE px;
}
#dois a:hover span{
background:url(URL DA IMAGEM) no-repeat -MESMO VALOR LEFT DE DOIS{px -ALTURA DO SEU MENU OU SEJA, METADE DA ALTURA DELE px;
}
#tres a:hover span{
background:url(URL DA IMAGEM) no-repeat -MESMO VALOR LEFT DE  TRES{px -ALTURA DO SEU MENU OU SEJA, METADE DA ALTURA DELE px;
}
#quatro a:hover span{
background:url(URL DA IMAGEM) no-repeat -MESMO VALOR LEFT DE  QUATRO{px -ALTURA DO SEU MENU OU SEJA, METADE DA ALTURA DELE px;
}
#cinco a:hover span{
background:url(URL DA IMAGEM) no-repeat -MESMO VALOR LEFT DE  CINCO{px -ALTURA DO SEU MENU OU SEJA, METADE DA ALTURA DELE px;
}
#seis a:hover span{
background:url(URL DA IMAGEM) no-repeat -MESMO VALOR LEFT DE  SEIS{px -ALTURA DO SEU MENU OU SEJA, METADE DA ALTURA DELE px;
}
Vá em DESIGN>EDITAR HTML > PRESSIONE Ctrl F > e procure por : ]]></b:skin>
e coloque todo o código antes dele.
Agora altere o seguinte código colocando o endereço das suas páginas:
<div id='menu'>
  <ul>
    <li id='um'><a href='URL DA PRIMEIRA PÁGINA'><span/>Primeiro link</a></li>
    <li id='dois'><a href='URL DA SEGUNDA PÁGINA'><span/>Segundo link</a></li>
    <li id='tres'><a href='URL DA TERCEIRA PÁGINA'><span/>Terceiro link</a></li>
    <li id='quatro'><a href='URL DA QUARTA PÁGINA'><span/>Quarto link</a></li>
    <li id='cinco'><a href='URL DA QUINTA PÁGINA'><span/>Quinto link</a></li>
    <li id='seis'><a href='URL DA SEXTA PÁGINA'><span/>Sexto link</a></li> 
  </ul>
</div>
Se quiser o menu ABAIXO do cabeçalho, procure por </header> e cole DEPOIS dele o último código.

E se quiser o menu ACIMA do cabeçalho, procure por <header> e cole Antes dele o último código.
Caso o menu não fique bem alinhado, altere o valor de margin-top que há logo abaixo de #menu{


O segundo modo é mais fácil. Esse eu aprendi no Other Things Attitude Included, primeiro crie duas imagens, uma normal e outra com efeito, por exemplo:



Agora hospede as imagens em algum lugar de novo, e agora vá em Design, Elementos de Página e adicione um Gadget (HTML/JavaScript) e cole o seguinte código fazendo as devidas alterações no que está em roxo:
obs.: caso tenha mais ou menos imagens acrescente ou retire algum dos códigos.
<img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM NORMAL 1" onmouseout="this.src='COLOQUE AQUI O ENDEREÇO DA IMAGEM NORMAL 1';" onmouseover="this.src='ENDEREÇO DA IMAGEM DE QUANDO O MOUSE PASSAR 1';" />
<img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM NORMAL 2" onmouseout="this.src='COLOQUE AQUI O ENDEREÇO DA IMAGEM NORMAL 2';" onmouseover="this.src='ENDEREÇO DA IMAGEM DE QUANDO O MOUSE PASSAR 2';" />
<img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM NORMAL 3" onmouseout="this.src='COLOQUE AQUI O ENDEREÇO DA IMAGEM NORMAL 3';" onmouseover="this.src='ENDEREÇO DA IMAGEM DE QUANDO O MOUSE PASSAR 3';" />
<img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM NORMAL 4" onmouseout="this.src='COLOQUE AQUI O ENDEREÇO DA IMAGEM NORMAL 4';" onmouseover="this.src='ENDEREÇO DA IMAGEM DE QUANDO O MOUSE PASSAR 4';" />
Agora clique em formato rich text ,grife a imagem e clique em Link e coloque o endereço da página correspondente, assim:
obs.: clique nelas para ver o tamanho original



Espero ter ajudado! Beijos até+  

12 comentários:

luan disse...

Aceita afiliação?
www.fofocasda-web.blogspot.com

Gotas de Uma Paixão! disse...

Nossa adorei a dica, com certeza esse tutorial ajudará muitas meninas! Ah, tem post novo no blog, depois dá uma passadinha por lá, seria uma honra recebê-la novamente! Beijos.

Carol Chicorsqui
http://gotasdeumapaixao.blogspot.com/

Gi disse...

Adorei as dicas! eu estava precisando mesmo! :c brigada!!!!!!!!!! Seguindo aki!

http://teensfashionblog.blogspot.com/

Fala sério disse...

Oi, nossa bem que você me falo e muuuuuuuuuuuito complicado...To tentando pegar a manhã akiiie..

Beijos !!

Carol Vicari disse...

Valeu flor, ajudou muito tava precisando mesmo desse tuto, vou usar ele no meu próximo lay! Obrigada pela visita, seguindo. bjs
www.blogcandydream.blogspot.com

Nereida disse...

Que bom que gostou dos brushes!
Beijos :)
timetea.blogspot.com

Paloma disse...

ooi flor é claro que sigo,
adorei o blog ;)
obrigada por me seguir me ajudou na minha meta de 100 seguidores ;)

beijos,Paloma.
espelhomeu-espelho.blogspot.com

Luh Siglindes disse...

ouwn obrigada, adorei o blog e o tutorial vou seguir aqui, você já segue o fs ? se não corre lá http://fashionscream.blogspot.com/

Por: Rebeca || Chiclete de Maça disse...

Ameii o tuto vou tentar fazer, é lindoo pakas haha
adorei aquii flor te seguindo, me ajuda na minha meta(300seguidores)???


Tem post novo la no meu blog
http://only-girls2.blogspot.com/

★ Flordeliz ★ disse...

Bom dia florzinha!!!

Adorei a dica, o meu ta assim!!!

Beijinhos e fique com Deus

www.universoglam.com

Paloma Morais disse...

Nossa! que tutorial útil*-* Adorei seu blog, fofa. Seguindo aqui, passa no meu blog?

Beijo e tudo de bom, dreaams.tk ou momamoraes.blogspot.com

Angélica disse...

O tutorial está ótimo. Prometo que um dia vou parar e tentar montar isso certinho, sempre tento e acabo não conseguindo, mas um dia ainda da certo haha

Estou seguindo e esperando por você no novo http://posdezesseis.blogspot.com/