如何将签名设计图转为带可点击按钮的Outlook HTML邮件签名

原有代码的核心问题 #

• Outlook 不支持 CSS 绝对定位、JavaScript 脚本，你写的 position 规则、onclick 点击事件完全不会生效
• 图片使用本地磁盘路径，收件人收到邮件时无法加载图片
• 按钮元素在 Outlook 中兼容性极差，你需要的是透明可点击区域，不需要可见按钮，无需用 button 标签实现

正确实现方案 #

用 HTML 原生图像映射（<map> 标签）实现，该方案在所有版本 Outlook 中都有最好的兼容性，无需定位和脚本，只需要给图片对应区域绑定跳转链接即可。

操作步骤 #

1. 先将你的签名设计图上传到你们公司的公网服务器/稳定的公共图床，获取公开可访问的图片 URL
2. 用在线图像映射生成工具，上传你的设计图，框选所有需要添加点击跳转的区域，自动生成对应坐标
3. 替换示例代码中的图片地址、坐标、跳转链接即可

示例代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>邮件签名</title>
</head>
<body>
<!-- 图片宽度设为固定值，避免不同客户端缩放导致坐标错位，按你的设计图实际宽度填写 -->
<img src="替换为你的公网图片URL" width="800" usemap="#signatureMap" alt="邮件签名" border="0">
<map name="signatureMap">
  <!-- 示例区域，替换成你自己生成的坐标和链接 -->
  <!-- 右侧第一个联系方式区域 -->
  <area shape="rect" coords="x1,y1,x2,y2" href="mailto:你的邮箱地址" alt="邮箱">
  <!-- 右侧第二个联系方式区域 -->
  <area shape="rect" coords="x1,y1,x2,y2" href="tel:你的电话号码" alt="电话">
  <!-- 底部第一个链接区域 -->
  <area shape="rect" coords="x1,y1,x2,y2" href="公司官网地址" alt="官网">
  <!-- 底部第二个链接区域 -->
  <area shape="rect" coords="x1,y1,x2,y2" href="地址导航链接" alt="地址">
  <!-- 社交媒体1 -->
  <area shape="rect" coords="x1,y1,x2,y2" href="社交媒体链接1" alt="社交媒体1">
  <!-- 剩下的区域按你需求继续添加即可 -->
</map>
</body>
</html>

注意事项 #

• 所有跳转链接要写完整：邮箱链接格式为 mailto:xxx@xxx.com，电话链接格式为 tel:13xxxxxxxxx，网页链接直接填完整的 https:// 开头的地址
• 不要给图片设置自适应宽度，固定为设计图实际像素宽度即可，避免坐标错位

内容的提问来源于stack exchange，提问作者RhysP55