Les images qui se transforment, dévoilant un visuel différent lorsque votre curseur les survole, sont communément appelées images de survol. Ces éléments visuels constituent une méthode remarquable pour mettre en valeur des produits ou dynamiser l’expérience des utilisateurs sur votre site web. Elles sont également fréquemment utilisées dans le cadre d’e-mails marketing, même si leur accueil peut y être parfois plus mitigé. Ces images sont généralement créées à l’aide de CSS et HTML. Cependant, si vous êtes à la recherche d’une méthode plus accessible, basée sur une interface utilisateur intuitive, l’outil Rollover proposé par FreshInbox répondra parfaitement à vos besoins.
Avant de vous lancer, assurez-vous d’avoir à portée de main les deux images que vous souhaitez intégrer à votre image de survol. L’une de ces images s’affichera par défaut, tandis que la seconde apparaîtra lorsque le curseur se trouvera au-dessus. Vos images peuvent être au format PNG ou JPG. Après les avoir téléchargées sur une plateforme de stockage en nuage ou un service de partage d’images comme Imgur, vous pourrez accéder à l’outil Rollover de FreshInbox.
Dans le champ dédié à l’URL de l’image principale, saisissez le lien de l’image qui doit être visible lorsque le curseur n’est pas positionné dessus. Indiquez ensuite les dimensions souhaitées pour cette image, tant en largeur qu’en hauteur. Dans le champ suivant, réservé à l’URL de l’image alternative, entrez le lien de l’image qui se révélera lors du survol par le curseur.
Ensuite, insérez une URL de redirection dans le champ « Lien ». Cette URL déterminera la page vers laquelle les utilisateurs seront redirigés en cliquant sur l’image de survol. N’oubliez pas de compléter le champ « Texte ALT » qui sert de description textuelle à l’image, puis cliquez sur le bouton « Générer ». Vous pourrez visualiser un aperçu de l’image à droite de l’écran et obtenir les codes nécessaires pour l’intégrer à votre site web ou votre e-mail.
Si vous désirez que votre image s’adapte à la taille de son conteneur, activez l’option « Mettre l’image à l’échelle du conteneur ». Cependant, il est conseillé de ne l’utiliser que si vous maîtrisez le concept de conteneurs. Pour une image de survol standard, laissez cette option désactivée. Pour intégrer votre image à un e-mail ou une page web, il vous suffira de copier le code généré et de le coller à l’endroit approprié, c’est-à-dire dans l’en-tête pour un e-mail et dans le corps pour une page web. Et voilà, vous venez de créer une image de survol en toute simplicité.
Découvrez l’outil Rollover de FreshInbox
Mis à jour: 8 décembre 2020 à 8h37