As imagens que mudam para mostrar uma imagem diferente quando o cursor é posicionado sobre ela são chamadas de Imagens de Rollover. Eles são uma maneira incrível de mostrar produtos ou tornar o conteúdo mais interativo para os visitantes. Essas imagens também são amplamente utilizadas em e-mails de marketing, onde talvez sejam menos bem-vindas. As imagens são criadas com CSS e HTML, mas se você estiver procurando por um método simples baseado em interface do usuário para criá-las, a ferramenta Rollover do FreshInbox é o que você precisa.
Antes de começar, certifique-se de ter as duas imagens que deseja incluir na imagem de rollover. Das duas imagens, uma aparecerá quando o cursor não estiver posicionado sobre ela, enquanto a outra aparecerá quando o cursor se mover para a imagem. Suas imagens podem estar no formato PNG ou JPG. Carregue-os em uma unidade de nuvem ou serviço de compartilhamento de imagens como o Imgur e depois vá para a ferramenta Rollover do FreshInbox.
No URL da imagem primária, insira o URL da imagem que deve aparecer quando o cursor do mouse não estiver posicionado sobre a imagem. Especifique a largura e a altura da imagem e, na URL da imagem alternativa, insira a URL da imagem que aparecerá quando o cursor for posicionado sobre ela.
Em seguida, insira um URL de redirecionamento na caixa ‘Link’. Se um usuário clicar em sua imagem de rollover, ele será direcionado para o URL que você inserir aqui. Digite o texto ALT e clique em ‘Gerar. Você verá uma prévia da imagem à direita e obterá códigos para adicionar a imagem ao seu site ou e-mail.
Se você quiser que a imagem seja responsiva, habilite a opção ‘Escala da imagem para a largura do contêiner’, mas faça isso apenas se você souber como trabalhar com contêineres. Deixe a opção desmarcada para uma imagem de rolagem normal. Para inseri-lo em um e-mail ou página web, copie o código e cole-o dentro da tag a que se destina, ou seja, Cabeçalho para e-mail e Corpo para página web. Isso é tudo o que é preciso para fazer uma imagem de rollover.
Visite a ferramenta Rollover do FreshInbox