So erstellen Sie Rollover-Bilder für E-Mails und Produktseiten

Bilder, die sich ändern und ein anderes anzeigen, wenn sich der Cursor darüber befindet, werden als Rollover-Bilder bezeichnet. Sie sind eine großartige Möglichkeit, Produkte zu präsentieren oder Inhalte für Besucher interaktiver zu gestalten. Diese Bilder werden auch häufig in Marketing-E-Mails verwendet, wo sie möglicherweise weniger willkommen sind. Die Bilder werden mit CSS und HTML erstellt. Wenn Sie jedoch nach einer einfachen UI-basierten Methode suchen, um sie zu erstellen, Rollover-Tool von FreshInbox ist was du brauchst.

Bevor Sie beginnen, stellen Sie sicher, dass Sie die beiden Bilder haben, die Sie in das Rollover-Bild aufnehmen möchten. Von den beiden Bildern wird eines angezeigt, wenn der Cursor nicht darüber positioniert ist, während das andere angezeigt wird, wenn sich der Cursor zum Bild bewegt. Ihre Bilder können sowohl im PNG- als auch im JPG-Format vorliegen. Laden Sie sie auf ein Cloud-Laufwerk oder einen Image-Sharing-Dienst wie Imgur hoch und wechseln Sie dann zum Rollover-Tool von FreshInbox.

Geben Sie in der URL des Primärbilds die URL des Bildes ein, die angezeigt werden soll, wenn sich der Mauszeiger nicht über dem Bild befindet. Geben Sie die Breite und Höhe des Bildes an und geben Sie unter URL für alternatives Bild die URL des Bildes ein, die angezeigt wird, wenn der Cursor darüber positioniert wird.

Geben Sie als Nächstes eine Weiterleitungs-URL in das Feld "Link" ein. Wenn ein Benutzer auf Ihr Rollover-Bild klickt, wird er zu der hier eingegebenen URL weitergeleitet. Geben Sie ALT-Text ein und klicken Sie auf "Generieren". Auf der rechten Seite sehen Sie eine Vorschau des Bildes und Codes zum Hinzufügen des Bildes zu Ihrer Website oder E-Mail.

Wenn Sie möchten, dass das Bild reagiert, aktivieren Sie die Option "Bild auf Breite des Containers skalieren", dies jedoch nur, wenn Sie wissen, wie Sie mit Containern arbeiten. Lassen Sie die Option für ein normales Rollover-Bild deaktiviert. Um es in eine E-Mail oder eine Webseite einzufügen, kopieren Sie den Code und fügen Sie ihn in das Tag ein, für das er bestimmt ist, d. H. Überschrift für E-Mail und Text für Webseite. Das ist alles, was Sie brauchen, um ein Rollover-Bild zu erstellen.

Besuchen Sie das Rollover-Tool von FreshInbox