Jak vytvořit obrázky s rolloverem pro e-maily a stránky produktů

click fraud protection

Obrázky, které se změní, aby zobrazovaly jiný, když je nad ním umístěn kurzor, se nazývají Rollover Images. Jsou to úžasný způsob, jak předvést produkty nebo zvýšit interaktivitu obsahu pro návštěvníky. Tyto obrázky jsou široce používány v marketingových e-mailech, kde jsou možná méně vítány. Obrázky jsou vytvářeny pomocí CSS a HTML, ale pokud hledáte jednoduchou metodu jejich vytvoření, Nástroj Rollover FreshInbox je to, co potřebujete.

Než začnete, ujistěte se, že máte dva obrazy, které chcete zahrnout do obrazu přechodu. Jeden ze dvou obrázků se objeví, když kurzor není umístěn nad ním, zatímco druhý se objeví, když se kurzor přesune na obrázek. Vaše obrázky mohou být ve formátu PNG nebo JPG. Nahrajte je do cloudové jednotky nebo služby sdílení obrázků, jako je Imgur, a poté přejděte do nástroje Rollover FreshInbox.

Do adresy URL primárního obrázku zadejte adresu URL obrázku, která by se měla zobrazit, když kurzor myši není umístěn nad obrázkem. Určete šířku a výšku obrázku a do adresy URL alternativního obrázku zadejte adresu URL obrázku, která se objeví, když se nad něj umístí kurzor.

instagram viewer

Nástroj Rollover FreshInboxu

Poté do pole „Odkaz“ zadejte přesměrovanou adresu URL. Pokud uživatel klikne na váš obraz při přechodu, bude přesměrován na adresu URL, kterou sem zadáte. Zadejte ALT text a klikněte na ‘Generovat. Na pravé straně uvidíte náhled obrázku a získáte kódy pro přidání obrázku na svůj web nebo e-mail.

Chcete-li, aby obraz reagoval, povolte možnost Změnit měřítko obrázku na šířku kontejneru, ale pouze pokud víte, jak s kontejnery pracovat. Ponechte volbu nezaškrtnutou pro normální obraz při přechodu. Chcete-li jej vložit do e-mailu nebo webové stránky, zkopírujte kód a vložte jej do značky, pro kterou je určen, tj. Nadpis pro e-mail a tělo pro webovou stránku. To je vše, co je potřeba k vytvoření převrácení obrazu.

Navštivte nástroj Rollover FreshInbox

watch instagram story