{"id":346,"date":"2014-02-10T11:38:45","date_gmt":"2014-02-10T11:38:45","guid":{"rendered":"http:\/\/freshinbox.com\/blog\/?p=346"},"modified":"2015-07-30T22:38:10","modified_gmt":"2015-07-30T22:38:10","slug":"image-rollovers-for-mobile-and-non-mobile-email","status":"publish","type":"post","link":"https:\/\/freshinbox.com\/blog\/image-rollovers-for-mobile-and-non-mobile-email\/","title":{"rendered":"Image Rollovers for Mobile and Non-Mobile Email"},"content":{"rendered":"

In previous articles we saw how we can implement interactive image rollovers for either webmail<\/a> or mobile email<\/a>.<\/p>\n

This tutorial will go over how we can combine both techniques for an image rollover example that works with mobile and non-mobile email clients – (except the usual suspects – Gmail and Outlook 2007+).<\/p>\n

Update:\u00a0<\/strong>Here’s a tool to create the non-mobile example: Rollover Image Builder for Email<\/a>.<\/p>\n

\"\"<\/p>\n

Table Background and image hover<\/h4>\n

Lets start with the mobile email example<\/a>. We only needed to make two small tweaks to our mobile example to support rollovers on the web.<\/p>\n

1) First we replace the div that contains the background image with a table and set the alternate image as a table background. This is because Outlook.com does not support background-image styles<\/a>.<\/p>\n

<table border=0 cellpadding=0 cellspacing=0 class=\"mobi-swap-content\"\r\n  background=\"http:\/\/...\/back-image.jpg\">\r\n<tr><td>\r\n  <a href=\"http:\/\/...\/product-link\"><img src=\"http:\/\/...\/front-image.jpg\" \r\n  style=\"display:block;\" height=265 width=250 alt=\"...\" border=0>\r\n<\/a><\/td><\/tr><\/table><\/pre>\n
2) We add a new hover rule that targets the image itself and we change the sibling CSS selector within the media query to target a table instead of a div.<\/p>\n
.mobi-swap-content:hover img{\r\n  visibility: hidden;\r\n}\r\n\r\n @media screen and (max-device-width: 480px) {\r\n  ...\r\n  div[class=mobi-swap-open]:hover + table[class=mobi-swap-content] img{\r\n   visibility:hidden;\r\n  }\r\n}<\/pre>\n
Final markup<\/h4>\n
Here’s the final markup:<\/p>\n
<style>\r\nbody {\r\n      -webkit-text-size-adjust:none;\r\n}\r\n.mobi-swap-content:hover img{\r\n   visibility: hidden;\r\n}\r\n\u00a0@media screen and (max-device-width: 1024px) {\r\n  div[class=mobi-swap-open], div[class=mobi-swap-close]{\r\n    display: block !important;\r\n    max-height: none !important;   \r\n    background-color: #eeeeee;\r\n    padding-left:10px;\r\n    font: 15px Helvetica;\r\n    line-height:40px;\r\n  }\r\n  div[class=mobi-swap-open] a, div[class=mobi-swap-close] a{\r\n    display:block;\r\n    text-decoration:none;\r\n  }\r\n  div[class=mobi-swap-open] {\r\n    position:absolute;\r\n    bottom:0px;\r\n    left:0px;\r\n    right:0px;\r\n  }\r\n  div[class=mobi-swap-open]:hover {\r\n    visibility: hidden;\r\n  }\r\n  div[class=mobi-swap-open]:hover + table[class=mobi-swap-content] img{\r\n    visibility:hidden;\r\n  }\r\n}\r\n<\/style>\r\n<div style=\"position:relative;\">\r\n<!--[if !mso 9]><!-->\r\n <div class=\"mobi-swap-open\" \r\n    style=\"top:auto;bottom:0px;display:none;max-height:0px;overflow:hidden;\">\r\n  <a href=\"#\">Tap here to show back<\/a>\r\n <\/div>\r\n<!--<![endif]-->\r\n <table border=0 cellpadding=0 cellspacing=0 class=\"mobi-swap-content\" \r\n    background=\"https:\/\/freshinbox.com\/examples\/tap-to-switch\/images\/back-sm.jpg\">\r\n   <tr><td>\r\n    <a href=\"http:\/\/www.amazon.com\/XOXO-Womens-Colorblocked-Dress-White\/dp\/B00GOQ1CJM\">\r\n    <img src=\"https:\/\/freshinbox.com\/examples\/tap-to-switch\/images\/front-sm.jpg\" \r\n     style=\"display:block;\" height=265 width=250 alt=\"XOXO Womens Colorblocked Body Con Dress\" border=0>\r\n    <\/a>\r\n <\/td><\/tr><\/table>\r\n<!--[if !mso 9]><!-->\r\n <div class=\"mobi-swap-close\" \r\n   style=\"display:none;max-height:0px;overflow:hidden;\">\r\n  <a href=\"#\">Tap here to show front<\/a>\r\n <\/div>\r\n<!--<![endif]-->\r\n<\/div><\/pre>\n