Question

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

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

非常感谢

Answer 1

首先你需要创建一个图像映射（https://www.w3schools.com/tags/tag_map.asp）

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

示例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/

动画后gif上的可点击区域

1 个答案: