Slike koje menjaju svoj izgled kada se kursor postavi iznad njih nazivaju se „rollover“ slike. One predstavljaju izvanredan način da se proizvodi predstave na vizuelno privlačan način ili da se poveća interaktivnost sadržaja za posetioce veb stranica. Ove slike se takođe široko primenjuju u marketinškim mejlovima, gde mogu dodati poseban vizuelni element. Tehnički se kreiraju pomoću CSS i HTML jezika, ali ukoliko tražite jednostavan i intuitivan način za njihovo kreiranje, alat „Rollover“ koji nudi FreshInbox je idealno rešenje.
Pre nego što započnete, obezbedite dve različite slike koje želite da koristite za rollover efekat. Jedna slika će biti vidljiva u početnom stanju, dok će se druga pojaviti kada korisnik pređe mišem preko slike. Slike mogu biti u formatu PNG ili JPG. Preporučuje se da ih postavite na neki od cloud servisa ili na platformu za deljenje slika poput Imgur-a. Nakon toga možete preći na FreshInbox alat za kreiranje rollover slika.
U polje za URL primarne slike unesite adresu slike koja treba da bude prikazana u početnom stanju, odnosno kada miš nije iznad slike. Zatim, navedite željenu širinu i visinu slike, a u polje za URL alternativne slike unesite adresu druge slike koja će se pojaviti kada se kursor miša postavi iznad prve.
Sledeći korak je unošenje URL adrese za preusmeravanje u polje „Link“. Ova adresa će biti odredište ukoliko korisnik klikne na sliku sa rollover efektom. Dodajte i ALT tekst radi bolje pristupačnosti i SEO optimizacije, a potom pritisnite dugme „Generiši“. Sa desne strane ćete videti pregled kreirane slike i dobiti kodove koje možete koristiti za dodavanje rollover efekta na vašu veb stranicu ili u mejl.
Ukoliko želite da se slika automatski prilagođava širini svog kontejnera, aktivirajte opciju „Skaliraj sliku prema širini kontejnera“. Međutim, preporučuje se da ovo uradite samo ako ste sigurni kako kontejneri funkcionišu. U suprotnom, ostavite opciju neoznačenom za standardni rollover efekat. Da biste ubacili sliku u e-mail ili veb stranicu, jednostavno kopirajte generisani kod i nalepite ga u odgovarajući HTML element. Na primer, u sekciju za naslov mejla ili telo veb stranice. To je sve što je potrebno za kreiranje rollover slike.
Posetite FreshInbox alat za kreiranje rollover slika
Ažurirano: 8. decembra 2020. u 8:37