Rafael Clares

Utilizando um menu Fisheye (olho de peixe)

Olá,
Cansado daquele velho menu que muda a cor do texto ao passar o mouse?
Que tal um menu olho de peixe, simples e bonito ?

FishEye

O menu é “animado” por Jscript que a “grosso modo”  consiste de 2 imagens para cada item do menu, por ex.  para cada item existem 2 imagens, neste caso, 1 imagem com 90 x 90 e outra  128 x 128… O Jscript, como já disse, cria a transição da menor para a maior criando o efeito que conhecemos como “olho de peixe” …
Existe apenas 3 pontos na configuração que acho interessante mexer no Jscript se for necessário, são:

 startSize : 90,
 endSize : 128,
 imgType : “.gif”,

Bem, no arquivo fisheye.js logo à partir da 2º linha existem essas informações acima.  
startSize :  Tamanho inicial da imagem, bom que seja o tamanho da imagem menor.
endSize :  Tamanho final da imagem, bom que seja o tamanho da imagem maior.
imgType :  Extensão do arquivo de imagem

Ah, se você não gostou dos ícones que estão no exemplo segue um link que utilizo muito para “caçar” meus ícones.

http://www.iconfinder.net/

Esse cara aí acima possui ícones/imagens de ótima qualidade que podem ser utilizadas em menus para web. No geral você procura pelo nome da imagem, por ex: se você está procurando uma lixeira, digite trash, recycled,  etc..

Links:
- Visualizar Exemplo Funcionando
- Download do pacote rar
- Procurar Icons

Obs: as imagens não precisam ser do mesmo tamanho  que usamos no exemplo, basta que você altere no Jscript como explicado acima, para não ficar distorcida deixe o startSize e endSize de acordo com as dimensões das imagens que você escolher…

Outra coisa, no iconfinder para cada imagem que você visualizar e for baixar, perceba que a mesma imagem pode possuir lá tamanhos diferentes, ou seja, você não precisa redimencionar as imagens para ter uma pequena e uma maior, basta escolher a imagem no iconfinder baixar os 2 tamanhos dela.

Abraços,

Rafael Clares,