Você pode criar um efeito de foto em seu tema do Tumblr que exibe uma imagem claramente quando o mouse passa sobre a imagem, mas quando o mouse não está pairando sobre a imagem, a imagem aparece borrada. Primeiro, prepare as imagens que você usará para o efeito. Em seguida, insira dois trechos de código em seu tema do Tumblr. Observe que o código não é compatível com postagens do Tumblr, apenas em temas de blog.
Prepare Imagens
Para realizar a tarefa de imagem desfocada, você precisará de duas imagens quase idênticas: uma cópia da imagem nítida original e uma segunda cópia da mesma imagem, apenas desfocada. Use o efeito Desfoque no GIMP ou Photoshop para criar a aparência borrada da segunda foto. Certifique-se de que as imagens tenham exatamente as mesmas dimensões.
Código JavaScript
Um snippet de código JavaScript é inserido entre o
e tags do seu blog do Tumblr. O código JavaScript inclui os eventos MouseRollover e MouseOut. O evento MouseRollover instrui a imagem clara a ser exibida quando o mouse passa sobre a imagem. O evento MouseOut define qual imagem exibir quando o mouse não está passando sobre a imagem.O snippet de código JavaScript a ser usado para esse efeito é:
Altere a referência “Picture1.jpg” para o URL da imagem original nítida. Altere a referência “Picture2.jpg” para o URL da imagem desfocada.
Código HTML
O código HTML que acompanha o snippet Javascript define o tamanho, a localização e o layout da imagem. Insira o código HTML no tema do Tumblr onde deseja que a exibição da foto apareça. O código HTML que acompanha o snippet Javascript acima é:
Substitua “Picture2.jpg” pelo URL da foto desfocada, que será exibida por padrão. Mude as variáveis “largura” e “altura” para o tamanho desejado de sua imagem renderizada.
Código de instalação
Para instalar o código em seu tema do Tumblr, abra o painel do Tumblr e clique na guia “Personalizar” no painel para que o blog o modifique. Clique na opção “Editar HTML” para abrir o editor de tema. Selecione o trecho de código Javascript para realçar o código e pressione “Ctrl-C” para copiar o código. Clique no espaço na frente do “”No código do tema e pressione“ Ctrl-V ”para colar o código.
Copie o código HTML e volte ao editor de temas do Tumblr. Encontre o local no código onde deseja que o efeito de foto seja renderizado. Clique no local e pressione “Ctrl-V” para colar o trecho de HTML. Clique em “Atualizar visualização” para testar o efeito na janela de visualização. Clique em “Salvar” para salvar as alterações.
