Interaktivní obrázky: Změna při najetí kurzorem
Obrázky, které se promění v jiný vizuál po najetí kurzorem myši, se nazývají rollover obrázky. Jsou efektivním nástrojem, jak atraktivně prezentovat produkty nebo obohatit obsah webové stránky o interaktivní prvek. I když jsou hojně využívány v marketingových e-mailech, nemusí být vždy vnímány pozitivně. Technicky se tyto efekty dosahují pomocí kombinace CSS a HTML, avšak pro jednodušší, uživatelsky přívětivé řešení existuje nástroj Rollover od FreshInboxu.
Než začnete s tvorbou rollover efektu, připravte si dva různé obrázky. Jeden se bude zobrazovat standardně, a druhý se objeví po najetí myší. Podporovány jsou formáty PNG a JPG. Doporučuje se nejprve obrázky nahrát na cloudové úložiště nebo službu pro sdílení obrázků, jako je například Imgur. Následně můžete přejít k nástroji Rollover od FreshInboxu.
V rozhraní nástroje naleznete pole pro vložení URL adresy primárního obrázku – tedy toho, který je viditelný bez interakce kurzoru. Dále je potřeba zadat šířku a výšku obrázku. Následuje vložení URL adresy alternativního obrázku, který se objeví po přejetí kurzorem myši.
V dalším kroku vyplňte pole „Odkaz“ URL adresou, na kterou chcete uživatele přesměrovat po kliknutí na obrázek. Nezapomeňte také přidat text ALT pro lepší přístupnost. Po vyplnění všech polí klikněte na „Generovat“. Vpravo se vám zobrazí náhled vašeho rollover obrázku a získáte kód, který můžete vložit do vašeho webu nebo e-mailu.
Pokud požadujete, aby se obrázek automaticky přizpůsobil šířce kontejneru, aktivujte možnost „Přizpůsobit obrázek šířce kontejneru“. Nicméně tuto funkci využijte jen, pokud jste obeznámeni s prací s kontejnery. Pro standardní rollover obrázek nechte tuto možnost nezaškrtnutou. Pro vložení do e-mailu nebo webu zkopírujte vygenerovaný kód a vložte ho do příslušné části dokumentu – typicky do hlavičky e-mailu nebo do těla webové stránky. A to je vše, co potřebujete k vytvoření vlastního interaktivního rollover obrázku.
Přejít na nástroj Rollover od FreshInboxu
Aktualizováno: 8. prosince 2020