Because every client renders your HTML differently, it’s critical to test your email across the most popular clients and devices. After you’ve finished setting up the perfect design for your campaign, ensure the email looks fantastic in EVERY inbox. Don’t Guess, Test!Īt Email on Acid, testing is at the core of our mission. If you decide to incorporate image maps in your campaigns however, you should definitely consider its many shortcomings before you embark. Take AwayĬontrary to popular belief, image map support in email clients is pretty robust. Granted this situation is highly unlikely, but may come in handy during testing. Some email service providers won’t track clicks if the link is embedded in an image map.Īnd finally there seems to be a bug in Apple Mail that if the image map is the last piece of content in an email, it loses its links. A simple fix is to wrap the image within a table and this will fix this problem. If the image is autoscaled by the client, the coordinates of the image map will be off. Breaks when iOS and Gmail Android App autoscales images ![]() Clicking on these areas will highlight the image in its own window and can potentially confuse users which areas contain actual links. In Gmail and, the link pointer (hand) will appear even when the user hovers the cursor over areas that are not defined by the image map. Images must have fixed width and height dimensions. Since the coordinates are hard coded, you cannot have images that scale to the width of its container as this will cause the coordinates to drift. When an image is blocked by the client, all you see is a single alt text of the image and not the individual links. With all the utility of image maps, there are some distinct drawbacks that you should consider should you decide to use them. Yes, even Microsoft Outlook! Other clients that I’ve tested that works with image maps include, iOS, Apple Mail, Yahoo! Mail, Gmail,, AOL and the Samsung Android client. Support for Image Maps in Email Clientsįrom my tests, all the major email clients support image maps. You’d normally need a tool to generate the coordinates such as Dreamweaver or an online service like this. There are three types of shapes for image maps: rect (rectangle), circle and poly (polygon). The code for the above image map ( example on codepen) that contains a clickable rectangle and triangle looks like this: Clicking within the areas within the image will take the user to the associated link. In Microsoft Expression Web map name FPMap0 id FPMap0> area href backgammon.htm shape rect coords163, 208, 352, 389 /> img alt. What is an Image Map?Īn image map is an image that is linked to a map of areas within the image specified by coordinates and a link. Guide describing the HTML issue detected by the W3C Validator: Bad value X1,Y1,X2,Y2 for attribute coords on element area: A circle must have three. However, support for image maps is surprisingly good among the major email clients. Image maps are largely considered antiquated on the web since there are more suitable techniques available and it comes with a host of downsides. Inside the tag, add a tag with the relative path to the image map is an image that contains areas that map to distinct links.Open the master page and switch to the Text Editor The following steps should be done for any master page that is applied to a topic which contains an image map: The easiest way to do this is through the master page. ![]() Tip: You can keep this new Scripts folder in the root Content folder, or drag into the Resources folder and keep it there.Īfter this is done, a reference to this script file will need to be added in each topic.
0 Comments
Leave a Reply. |