動畫後可點擊的區域

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/