title: How to make <map>-tag in Gmail work on Smartphones?
body: <p>I plan to integrate HTML in an Email in Gmail. This needs to be done because I want to send a picture that contains multiple links scattered around (on the picture are bubbles and the links should be layed over them).</p>
  
  <p>For creating the links I use the HTML-tag <code>&lt;map&gt;</code>.
  For integrating HTML in Gmail, I use the method explained in <a href="https://www.youtube.com/watch?v=MsMSqhMlfao" rel="nofollow noreferrer">this video</a>.</p>
  
  <p>I did all this and tested the mail on desktop computer and Smartphone. On desktop computer it works perfectly. On smartphone the picture gets displayed, but the links are not working (when I tap on the bubbles, nothing happens).
  I assume that the coordinates inside the <code>&lt;map&gt;</code>-tag are not in the correct places when the email opens on smartphone. Does someone know a solution? Thanks a lot.</p>
  
  <p>Here's how the HTML-code looks like:</p>
  
  <pre><code>&lt;img src="https://blablabla.com/image.png" usemap="#image-map"&gt;
  
  &lt;map name="image-map"&gt;
      &lt;area target="_blank" href="http://www.link1.com" coords="241,174,216,188,188,180,135,211,126,240,135,249,127,294,149,312,167,320,179,330,197,335,215,333,234,335,236,348,242,358,265,352,275,350,287,356,297,364,312,360,320,337,328,327,335,306,354,306,377,298,396,280,393,261,371,255,368,233,335,221,305,230,311,205,300,185,267,185" shape="poly"&gt;
      &lt;area target="_blank" href="http://www.link2.com" coords="155,324,115,360,101,409,122,460,151,482,181,487,251,487,288,480,322,454,343,430,347,414,382,387,345,396,315,368,295,374,283,368,275,365,259,364,242,366,226,355,227,346,222,338,190,341,172,335" shape="poly"&gt;
      &lt;area target="_blank" href="http://www.link3.com" coords="699,134,673,135,619,146,601,154,579,170,560,198,561,256,525,306,579,282,623,300,643,262,664,245,687,239,684,248,755,237,767,213,768,182,757,155" shape="poly"&gt;
      &lt;area target="_blank" href="http://www.link4.com" coords="559,334,605,335,628,328,627,302,651,264,675,254,714,249,756,244,792,245,829,256,857,272,879,294,883,314,874,344,856,374,834,366,816,364,804,351,761,354,753,352,720,351,713,354,688,352,676,362,667,367,648,373,642,353,627,360" shape="poly"&gt;
      &lt;area target="_blank" href="http://www.link5.com" coords="607,406,621,394,632,393,651,378,679,374,691,359,708,358,715,366,735,357,755,368,787,356,811,374,836,374,850,389,846,408,867,422,865,449,847,466,819,463,802,497,771,496,763,479,753,490,714,486,698,479,679,489,656,478,651,458,628,467,605,457,613,426" shape="poly"&gt;
  &lt;/map&gt;
  </code></pre>