Billeder, der skifter til at vise et andet, når markøren er placeret over det, kaldes Rollover-billeder. De er en fantastisk måde at fremvise produkter eller gøre indhold mere interaktivt for besøgende. Disse billeder er også meget brugt i marketing-e-mails, hvor de måske er mindre velkomne. Billederne er lavet med CSS og HTML, men hvis du leder efter en simpel UI-baseret metode til at skabe dem, er FreshInbox’s Rollover-værktøj, hvad du har brug for.
Før du starter, skal du sikre dig, at du har de to billeder, du vil inkludere i rollover-billedet. Af de to billeder vises det ene, når markøren ikke er placeret over det, mens det andet vises, når markøren flytter til billedet. Dine billeder kan være i både PNG- eller JPG-format. Upload dem til et skydrev eller billeddelingstjeneste som Imgur, og gå derefter over til FreshInbox’s Rollover-værktøj.
Indtast URL’en for det billede, der skal vises, når musemarkøren ikke er placeret over billedet i URL-adressen til det primære billede. Angiv bredden og højden af billedet, og indtast URL’en for det billede, der vises, når markøren er placeret over det, i URL-adressen til alternative billeder.
Indtast derefter en omdirigerings-URL i feltet ‘Link’. Hvis en bruger klikker på dit rollover-billede, vil de blive ført til den URL, du indtaster her. Indtast ALT-tekst, og klik på ‘Generer’. Du vil se en forhåndsvisning af billedet til højre og få koder til at tilføje billedet til din hjemmeside eller e-mail.
Hvis du ønsker, at billedet skal være responsivt, skal du aktivere indstillingen ‘Skaler billede til bredde på container’, men gør det kun, hvis du ved, hvordan du arbejder med containere. Lad indstillingen være umarkeret for et normalt rollover-billede. For at indsætte det i en e-mail eller en webside, skal du kopiere koden og indsætte den i det tag, den er beregnet til, dvs. Overskrift til e-mail og Brød til webside. Det er alt, der skal til for at lave et rollover-billede.
Besøg FreshInbox’s Rollover-værktøj