Как заставить <map>тег в Gmail работать на смартфонах?

Question

Я планирую интегрировать HTML в электронную почту в Gmail. Это нужно сделать, потому что я хочу отправить картинку, которая содержит несколько ссылок, разбросанных вокруг (на картинке пузыри, и ссылки должны быть наложены на них).

Для создания ссылок я использую HTML-тег <map>. Для интеграции HTML в Gmail я использую метод, описанный в этом видео .

Я сделал все это и проверил почту на настольном компьютере и смартфоне. На настольном компьютере работает отлично. На смартфоне картинка отображается, но ссылки не работают (когда я нажимаю на пузырьки, ничего не происходит). Я предполагаю, что координаты внутри тега <map> находятся в неправильных местах, когда электронное письмо открывается на смартфоне. Кто-нибудь знает решение? Большое спасибо.

Вот как выглядит HTML-код:

<img src="https://blablabla.com/image.png" usemap="#image-map">

<map name="image-map">
    <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">
    <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">
    <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">
    <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">
    <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">
</map>

Answer 1

Это известная проблема и проблема совместимости с Gmail в целом. В целях стандартов я бы предложил не использовать карты изображений, так как они могут содержать ошибки, не отвечают требованиям по дизайну, и iOS / Android часто сталкиваются с проблемами при их интерпретации.

Вот некоторая вспомогательная информация из электронной почты на Acid: https://www.emailonacid.com/blog/article/email-development/image-map-support-in-html-email

Специально для вашей проблемы:

Потенциальная путаница в Gmail и Outlook.com В Gmail и Outlook.com указатель ссылки (рука) появится, даже когда пользователь Наведите курсор на области, которые не определены картой изображения. Нажав на эти области, вы выделите изображение в своем собственном окне и потенциально может сбить с толку пользователей, в каких областях есть реальные ссылки.

Вероятно, это снова вызвано проблемами отзывчивости в том, как каждый клиент обрабатывает размеры изображений (ограничивающие области содержимого и то, что не имеет разную ширину).