{"id":593,"date":"2014-05-14T06:48:50","date_gmt":"2014-05-14T06:48:50","guid":{"rendered":"http:\/\/freshinbox.com\/blog\/?p=593"},"modified":"2014-12-17T20:18:08","modified_gmt":"2014-12-17T20:18:08","slug":"tool-to-create-an-interactive-image-in-an-email","status":"publish","type":"post","link":"https:\/\/freshinbox.com\/blog\/tool-to-create-an-interactive-image-in-an-email\/","title":{"rendered":"Tool to Create an Interactive Image in an Email"},"content":{"rendered":"

Over the past several months some readers have expressed interest in using some of the interactive email techniques covered by some of my blog posts. <\/p>\n

In an effort to make these techniques even more accessible I created a Rollover Image for Email Tool<\/a> that generates the necessary HTML and CSS covered in 3 Steps to Create An Interactive Email<\/a>. This tool lets you to create a “rollover” image that displays an alternate image when the user hovers the cursor over the image. The rollover effect works on Yahoo! Mail, Outlook.com, AOL Mail and Outlook 2003 (unfortunately it doesn’t work in Gmail).<\/p>\n

All you need to do is paste the resulting code into your campaign editor and you\u2019ll be good to go. It\u2019s that simple!<\/p>\n

Here\u2019s the link to the tool:
\nhttps:\/\/freshinbox.com\/tools\/rollover\/
\n<\/a><\/strong><\/p>\n

\n\"rollover-overview\"<\/a><\/div>\n



<\/p>\n

Walkthough of the Rollover Images Tool<\/h4>\n

In this walkthough, we will create a rollover image showing a model facing forward and back.<\/p>\n

\"dress-front-back\"
<\/p>\n

1) You will need two images of similar sizes hosted within your email platform (which is normally where you host the images in your email) or at a web accessible server. For this example we will be using images that are hosted on this blog. <\/p>\n

2) Paste the URL of the front image in the \u2460 Primary Image field. The application will automatically determine the width and height of the image.
\nFront image url: https:\/\/freshinbox.com\/tools\/rollover\/images\/dress-front.jpg<\/a><\/p>\n

3) Paste the URL of the back image in the \u2461 Alternate Image field. This image will be displayed when users hover the cursor over the image.
\nBack image url: https:\/\/freshinbox.com\/tools\/rollover\/images\/dress-back.jpg<\/a><\/p>\n

4) In the \u2462 Link field, add the URL of the landing page. Optionally enter in the Alt Text field any text you want displayed if the image is blocked by the email client.
\nFor our example lets use this Google URL as our Link: https:\/\/www.google.com\/#q=black+dress<\/a><\/p>\n

5) Click on the \u2463 Generate button and a \u2464 preview of the finished example as well as the \u2465 HTML+CSS code is shown. The image will display the front view and back view once you hover your cursor over the image.<\/p>\n

Now, you can copy the snippet of code and paste it into your email editor to incorporate it within your email. If you have a Yahoo! Mail or Outlook.com account, you can also send a test to yourself by entering your email address at the bottom and clicking on the “Email this to me” button.

<\/p>\n

Feedback<\/h4>\n

If you find the tool useful feel free to share the link with your friends. If you have any thoughts or suggestions, please let me know as I\u2019ll be incorporating any feedback that can further enhance this tool.


<\/p>\n

\n
\nSubscribe to the #EmailGeeks Newsletter<\/span>\n

<\/p>\n