Bilder, die ihr Aussehen ändern, wenn der Mauszeiger darüber bewegt wird, werden als Rollover-Bilder bezeichnet. Sie stellen eine hervorragende Methode dar, um Produkte in Szene zu setzen oder Inhalte für Webseitenbesucher interaktiver zu gestalten. Solche Bilder finden auch häufig Anwendung in Marketing-E-Mails, obwohl sie dort gelegentlich auf weniger Gegenliebe stoßen. Die Erstellung solcher Bilder erfolgt üblicherweise mithilfe von CSS und HTML, doch für Anwender, die eine einfachere, oberflächenbasierte Methode bevorzugen, bietet das Rollover-Tool von FreshInbox eine optimale Lösung.
Bevor Sie mit der Erstellung beginnen, sollten Sie sicherstellen, dass Sie über die beiden Bilder verfügen, die Sie in Ihr Rollover-Bild integrieren möchten. Eines der beiden Bilder wird standardmäßig angezeigt, wenn sich der Mauszeiger nicht über dem Bild befindet, während das andere Bild erscheint, sobald der Cursor auf das Bild bewegt wird. Ihre Bilder können dabei entweder im PNG- oder JPG-Format vorliegen. Laden Sie diese auf einen Cloud-Speicher oder einen Bildhosting-Dienst wie Imgur hoch und navigieren Sie anschließend zum Rollover-Tool von FreshInbox.
Im Bereich „Primäre Bild-URL“ tragen Sie die Webadresse des Bildes ein, welches angezeigt werden soll, solange sich der Mauszeiger nicht über dem Bild befindet. Legen Sie anschließend die gewünschte Breite und Höhe des Bildes fest. Im Feld „Alternative Bild-URL“ geben Sie die URL des Bildes ein, das bei Überfahren mit dem Cursor erscheinen soll.
Im nächsten Schritt tragen Sie eine Weiterleitungs-URL in das Feld „Link“ ein. Wenn ein Benutzer auf Ihr Rollover-Bild klickt, wird er zu dieser URL weitergeleitet. Fügen Sie nun noch einen passenden ALT-Text hinzu und betätigen Sie die Schaltfläche „Generieren“. Sie sehen dann auf der rechten Seite eine Vorschau Ihres Bildes und erhalten die erforderlichen Codes, um das Bild in Ihre Webseite oder E-Mail einzubinden.
Wenn Sie möchten, dass das Bild responsiv ist, also sich an die Containerbreite anpasst, aktivieren Sie die Option „Bild auf Containerbreite skalieren“. Beachten Sie jedoch, dass diese Funktion nur bei Kenntnissen im Umgang mit Containern empfehlenswert ist. Für ein normales Rollover-Bild sollte diese Option deaktiviert bleiben. Um das Bild in eine E-Mail oder eine Webseite einzufügen, kopieren Sie den generierten Code und fügen ihn an der entsprechenden Stelle ein. Beispielsweise eignet sich der Header-Bereich für E-Mails und der Textbereich für Webseiten. Das ist alles, was Sie benötigen, um ein Rollover-Bild zu erstellen.
Aktualisiert: 8. Dezember 2020 um 8:37 Uhr