I have a .gif file on which I have applied map, area tag to make some parts of the gif clickable.Then I'm sending this gif in emails.I do this by using inspect element in the email and pasting my html code in the mail body.
The issue is that when I open that email on the mobile devices the clickable areas get messed up because the "coords" attribute of the area tag sets the coordinates according to one screen size. I want to set the coordinates of the links in such a way that when I send the gif in the email the coordinates stay intact even in the mobile device.
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="display:flex;justify-content: center;">
<img src="https://cdn.connektahub.com/videos-data/reacon-x-connekta-5.gif" usemap="#lessons">
<map name = "lessons">
<area shape = "rect" coords = "306,950,397,1048" alt = "Activate"
href = "https://cdn.connektahub.com/videos-data/activate.mp4" target = "_blank""/>
<area shape = "rect" coords = "244,739,355,829" alt = "Campaign"
href = "https://cdn.connektahub.com/videos-data/campaign.mp4" target = "_blank""/>
<area shape = "rect" coords = "200,1024,283,1105" alt = "Projects"
href = "https://cdn.connektahub.com/videos-data/projects.mp4" target = "_blank""/>
<area shape = "rect" coords = "53,950,184,1032" alt = "Storefront tutorial"
href = "https://cdn.connektahub.com/videos-data/Storefront%20tutorial%20.mp4" target = "_blank""/>
<area shape = "rect" coords = "300,875,425,935" alt = "Partnership"
href = "https://cdn.connektahub.com/videos-data/partnership.mp4" target = "_blank""/>
<area shape = "rect" coords = "176,909,301,943" alt = "Connekta Hub"
href = "https://www.connektahub.com/" target = "_blank""/>
<area shape = "rect" coords = "450,25,732,100" alt = "Reacon Group"
href = "https://www.reacongroup.com/" target = "_blank""/>
<area shape = "rect" coords = "474,1082,518,1138" alt = "Customer Acquisition"
href = "https://cdn.connektahub.com/videos-data/62e0f18596d4006a59976f0e_for%20web3-transcode.mp4" target = "_blank""/>
<area shape = "rect" coords = "508,812,552,865" alt = "Print Pacakging "
href = "https://cdn.connektahub.com/videos-data/62e0ef82d111dd28152d8510_for%20web%202-transcode.mp4" target = "_blank""/>
<area shape = "rect" coords = "347,565,391,616" alt = "Content Studio"
href = "https://cdn.connektahub.com/videos-data/62de906c35d7fa6a8379d49f_Untitled-transcode.mp4" target = "_blank""/>
<area shape = "rect" coords = "380,1778,740,1970" alt = "Content Studio"
href = "https://www.connektahub.com/connekta/contact-us" target = "_blank""/>
</map>
</div>
</body>
</html>
I tried using different solutions which also include using relative positioning and using divs with position absolute but the issue is that these are not recognized in the mail.
Also tried solutions using JS but still the same issue that email doesn't respond to that either.