Imagens Interativas: Crie Efeitos Rollover Incríveis com Facilidade!

Imagens Interativas: Descubra o Efeito Rollover

As imagens que se transformam, revelando um conteúdo visual diferente quando o cursor do mouse se move sobre elas, são conhecidas como Imagens de Rollover. Elas representam uma excelente forma de exibir produtos ou adicionar dinamismo e interatividade ao conteúdo do seu site. Essas imagens também encontram grande utilidade em campanhas de email marketing, apesar de sua recepção, neste contexto, ser por vezes variável. A criação dessas imagens envolve, geralmente, CSS e HTML. No entanto, se a sua preferência recai sobre uma abordagem mais simples, baseada em uma interface gráfica, a ferramenta Rollover do FreshInbox é a solução ideal para você.

Antes de iniciar, certifique-se de ter selecionado as duas imagens que deseja empregar no efeito rollover. Uma delas será a imagem padrão, exibida quando o cursor não estiver sobre ela, enquanto a segunda surgirá quando o cursor se posicionar sobre a área da imagem. Os formatos suportados são PNG e JPG. Após o carregamento dessas imagens em uma plataforma de armazenamento na nuvem ou serviço de compartilhamento, como o Imgur, navegue até a ferramenta Rollover do FreshInbox.

No campo destinado ao URL da imagem primária, insira o endereço da imagem que deverá ser mostrada inicialmente, ou seja, quando o cursor não estiver sobre a imagem. Indique também as dimensões desejadas para a imagem, especificando sua largura e altura. Em seguida, no campo URL da imagem alternativa, forneça o endereço da imagem que será revelada ao passar o cursor sobre ela.

Logo após, preencha o campo ‘Link’ com o URL de destino. Assim, ao clicar na imagem de rollover, o usuário será direcionado para este endereço especificado. Insira o texto alternativo na área correspondente e clique em ‘Gerar’. Uma prévia da imagem será exibida do lado direito, e você terá acesso aos códigos necessários para integrar a imagem ao seu site ou email.

Caso deseje que a imagem seja responsiva, ative a opção ‘Escala da imagem para a largura do contêiner’. Contudo, esta opção é aconselhável apenas se você tiver familiaridade com o trabalho com contêineres. Para uma imagem de rollover padrão, deixe esta opção desabilitada. Para incorporar a imagem em um email ou página web, copie o código fornecido e cole-o dentro da tag apropriada: Cabeçalho para emails e Corpo para páginas web. Seguindo esses passos, você terá implementado sua imagem de rollover com sucesso.

Experimente a ferramenta Rollover do FreshInbox

Última atualização: 8 de dezembro de 2020 às 08h37