Как создать Rollover изображения для электронной почты и страниц продукта

Изображения, которые изменяются, чтобы показать другое, когда курсор находится над ним, называются Rollover Images. Это отличный способ продемонстрировать продукты или сделать контент более интерактивным для посетителей. Эти изображения широко используются в маркетинговых электронных письмах, где, возможно, они менее приветствуются. Изображения создаются с помощью CSS и HTML, но если вы ищете простой метод на основе пользовательского интерфейса для их создания, Инструмент Rollover от FreshInbox это то, что вам нужно.

Прежде чем начать, убедитесь, что у вас есть два изображения, которые вы хотите включить в изображение ролловера. Из двух изображений одно появится, когда курсор не будет помещен над ним, а другое появится, когда курсор переместится на изображение. Ваши изображения могут быть в формате PNG или JPG. Загрузите их на облачный диск или сервис обмена изображениями, например Imgur, а затем перейдите на инструмент Rollover от FreshInbox.

В URL-адресе основного изображения введите URL-адрес изображения, которое должно отображаться, когда курсор мыши не расположен над изображением. Укажите ширину и высоту изображения и в URL-адресе альтернативного изображения введите URL-адрес изображения, которое будет отображаться при наведении на него курсора.

Затем введите URL-адрес перенаправления в поле «Ссылка». Если пользователь нажимает на ваше изображение ролловера, они будут перенаправлены на URL, который вы ввели здесь. Введите текст ALT и нажмите ‘Создать. Вы увидите предварительный просмотр изображения справа и получите коды для добавления изображения на свой сайт или по электронной почте.

Если вы хотите, чтобы изображение было отзывчивым, включите параметр «Масштабировать изображение по ширине контейнера», но делайте это только в том случае, если вы знаете, как работать с контейнерами. Оставьте флажок снятым для обычного ролловера изображения. Чтобы вставить его в электронное письмо или веб-страницу, скопируйте код и вставьте его в тег, для которого он предназначен, т. Е. Заголовок для электронной почты и текст для веб-страницы. Это все, что нужно, чтобы сделать ролловер.

Посетите ролловер-инструмент FreshInbox