In Tutoriais

Menu com Imagens e Efeito Hover


Oi. Trouxe um tutorial bem útil e fácil para criar efeitos em menus sem usar quase nada de CSS; eu uso nos links das redes sociais ali na sidebar e já usei esse truque no "leia mais" do blog e no voltar ao topo; para isso, você vai ter que criar 2 imagens apenas, uma diferente da outra, levando em conta que uma seria para quando o mouse estiver posicionado no menu. Veja o resultado passando o mouse em cada link abaixo:



Legal não é? Para usar, é só ir em qualquer local que use HTML, como em um novo gadget, em uma página, na postagem...e colar o código:
<a href='LINK-URL' title='NOME-DESSE-LINK'><img src="URL-DA-IMAGEM-1" onmouseover="this.src='URL-DA-IMAGEM-2';" onmouseout="this.src='URL-DA-IMAGEM-1';"/></a><a href='LINK-URL' title='NOME-DESSE-LINK'><img src="URL-DA-IMAGEM-1" onmouseover="this.src='URL-DA-IMAGEM-2';" onmouseout="this.src='URL-DA-IMAGEM-1';"/></a> 

Feito isso, substitua os locais indicados por links, nomes dos links e URLs/links de imagens, sendo que a primeira deve ser a que será vista por todos, a segunda a que aparecerá quando o mouse estiver sobre a imagem e a terceira será a mesma que a primeira :3 É legal porque às vezes a gente cria efeitos bonitos em imagens que são complicados para passar para HTML, e com esse código, isso não será problema, já que se usa os dois. Espero que gostem.

Código encontrado no Ciudad Blogger//Imagem da Cherry: Line Corporation

Related Articles

4 comentários:

  1. Muito fofo, eu só não entendi duas coisinhas: onde está "LINK-URL" é pra colocar o URL do blog? e
    o que é pra colocar em 'NOME-DESSE-LINK"? Adorei esse código, vou usar assim que responder minhas duvidas ^^
    Bjs

    ResponderExcluir
    Respostas
    1. Então, em link-url é o link que desejar pôr, qualquer um, inclusive o do blog; em Nome Desse Link, você pode dar um título, como por exemplo o nome do endereço para o qual o link vai levar, ou como fiz colocando qualquer palavra, no exemplo usei a palavra ~chu.
      Por exemplo (retirando os asteriscos):
      <*a href="http://reinokawaii.blogspot.com" title='Reino Kawaii'*>...

      Excluir
  2. Que fofo esse menu Roberta,vou testar,caso não dê cero peço sua ajuda,ok??

    ahh!!! vim agradecer também,colocar os leitores,foi um mel na sopa neném,(risos,risos)

    ResponderExcluir
  3. Fazia um tempo que eu estava procurando códigos para deixar a imagem atrás do menu!
    Muito Obrigada!Me ajudou muito sua postagem!
    www.swe-etspace.blogspot.com.br

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart