As imagens que mudam para mostrar uma imagem diferente quando o cursor é posicionado sobre elas são chamadas de Imagens de rollover. Eles são uma maneira incrível de apresentar produtos ou tornar o conteúdo mais interativo para os visitantes. Essas imagens 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 IU para criá-las, Ferramenta Rollover do FreshInbox é o que você precisa.

Antes de começar, certifique-se de ter as duas imagens que deseja incluir na imagem cambiável. 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. Faça o upload para uma unidade de nuvem ou serviço de compartilhamento de imagens como o Imgur e, em seguida, 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, no URL da imagem alternativa, insira o 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 cambiável, ele será levado ao URL que você inserir aqui. Insira o texto ALT e clique em ‘Gerar. Você verá uma prévia da imagem à direita e obterá os códigos para adicionar a imagem ao seu site ou e-mail.

Se você quiser que a imagem seja responsiva, ative a opção ‘Ajustar a imagem à largura do contêiner’, mas faça isso apenas se souber como trabalhar com contêineres. Deixe a opção desmarcada para uma imagem de rollover normal. Para inseri-lo em um e-mail ou página da web, copie o código e cole-o dentro da tag a que se destina, por exemplo, Título para e-mail e Corpo para página da web. Isso é tudo o que é preciso para fazer uma imagem rollover.

Visite a ferramenta Rollover do FreshInbox