动画后 gif 上的可点击区域

Question

我正在开发一个网站，我需要制作一个代表工作过程的动画部分，我制作了一个 gif 来构建一个带有一些很酷的文本动画等的饼图。现在我想知道如何我可以让这些文本可点击，让我可以转到相关部分。

我在这个网站上看到过类似的东西：https://www.millerheimangroup.com/ “准备好解决方案”，它不是 gif，而是具有不同可点击部分的图像.. 你能帮助我吗？哪个可能是最好的解决方案？

非常感谢

Answer 1

首先您需要创建一个图像映射 (https://www.w3schools.com/tags/tag_map.asp)

它们是用于在图像 (http://imagemap-generator.dariodomi.de/) 上创建 <area> 标签的许多工具。

示例 HTML：

<map name="planetmap">
    <area id="first" shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
    <area id="second" shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
    <area id="third" shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

示例 JavaScript：

$("area #first").click(function() {
   alert("Click!");
}
$("area #second").click(function() {
  alert("Click!");
}

为了更好的代码风格，你也可以使用https://api.jquery.com/each/