Image Map

14.4.13

Menu em Imagem com efeito hover



Olá! Como estão? Gente, estou postando no blog Just Our Html. Vocês me verão lá todas terças, quintas e sábados. Esta foi a minha primeira postagem lá. Bem, vocês devem ter percebido a mudança do modelo do blogger né? Então, acho que a maioria está em fase de adaptação, na procura dos códigos e tal. Por isso, até nós conseguirmos aprender mais sobre esse modelo, estarei postando mais tutoriais ligados a JavaScript, é até bom porque o JavaScript é bem mais fácil e eu ainda não parei pra sair fuçando esse modelo novo. Hoje o tutorial é um menu de imagem com hover. Acho legal pra quem quer um menu que combine com o layout. Eu coloquei essa imagem abaixo, mas vocês podem fazer o que quiserem. (Passe o mouse em cima).




Para começar, é bem simples. Abra um HTML/JavaScript e cole o seguinte:

<center><a href="link do seu blog"><img src="URL da imagem normal" onmouseout="this.src='Repita a URL da imagem normal';" onmouseover="this.src='URL da imagem no estado hover';" /></a></center>

É só fazer o que se pede. Depois quando for colocar mais uma página, só copiar e colar, normalmente. Espero que tenham gostado. Aqui está algumas imagens deste modelo simples que fiz. Beijos!






6 comentários:

  1. Legal tava procurando algo assim e agora achei!
    http://luuhhope.blogspot.com.br/

    ResponderExcluir
  2. Oi flor, acabei de conhecer seu blog e to amando! Usei esse tutorial para meu novo layout e ja creditei seu blog okay?
    Ja seguindo aqui!

    Beijooooooooooks
    http://moda-teensworld.blogspot.com.br/

    ResponderExcluir
  3. amo esse tutorial sempre uso no meu blog e ele fica um efeito bem fofo obrigado pela ajuda :D

    http://blogda-juh.blogspot.com.br/

    ResponderExcluir