动画后可点击的区域

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/