如何在Google Sites的平面图图片上叠加可跳转按钮？

Google Sites支持嵌入自定义HTML，完全可以实现你的需求，以下是具体步骤和代码示例：

步骤1：获取区域坐标 #

先把你的平面图用截图工具打开（比如系统自带画图、Snipaste），标记每个编号区域对应的按钮位置——可以记录按钮左上角相对于图片左上角的像素坐标，或者直接标记区域中心位置。

步骤2：编写自定义HTML代码 #

用以下模板，替换掉图片地址、按钮坐标和跳转链接即可：

<div style="position: relative; width: 800px; height: 600px;">
  <!-- 替换成你在Google Sites上传的图片链接 -->
  <img src="你的平面图URL" style="width: 100%; height: auto;" alt="区域平面图">
  
  <!-- 区域1的可点击按钮 -->
  <a href="区域1的页面URL" style="position: absolute; top: 100px; left: 200px; width: 40px; height: 40px; background-color: rgba(255,0,0,0.3); border: none; border-radius: 50%; cursor: pointer; text-align: center; line-height: 40px; color: white; font-weight: bold;">1</a>
  
  <!-- 区域2的按钮，复制此块修改坐标和链接即可 -->
  <a href="区域2的页面URL" style="position: absolute; top: 250px; left: 350px; width: 40px; height: 40px; background-color: rgba(255,0,0,0.3); border: none; border-radius: 50%; cursor: pointer; text-align: center; line-height: 40px; color: white; font-weight: bold;">2</a>
  
  <!-- 更多区域按钮依此类推 -->
</div>

代码说明： #

• position: relative 的容器是按钮定位的参考，width 和 height 要和你的平面图实际尺寸匹配（也可以用百分比实现自适应）
• img 标签的 src 替换成你在Google Sites上传图片后获取的链接（右键图片选「复制链接地址」）
• 每个 <a> 标签就是一个可点击按钮：
  • top 和 left 控制按钮相对于容器左上角的位置，根据你标记的坐标调整
  • width/height 控制按钮大小，background-color 用半透明色避免遮挡平面图内容
  • href 替换成对应区域的页面URL（支持Google Sites内部页面链接）

步骤3：在Google Sites中嵌入HTML #

1. 打开你的Google Sites页面，进入编辑模式
2. 点击顶部「插入」选项，选择「嵌入」
3. 在弹出窗口中选择「嵌入代码」，粘贴你写好的HTML代码
4. 调整嵌入模块的大小，确保和平面图尺寸匹配，保存即可

调整技巧： #

• 如果按钮位置不准，直接修改代码里的 top 和 left 值，多测试几次就能对准
• 可以修改按钮样式：比如把圆形改成方形（去掉border-radius: 50%）、调整透明度或颜色
• 若按钮数量过多导致代码过长，可将HTML代码存为文件上传到Google Drive，再通过Drive的共享链接嵌入

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