在视频或gif中添加链接

Question

您知道单击动画媒体（例如gif或视频）中的元素的任何解决方案吗？

附件链接中的示例如何（在任何时间）单击奔跑的家伙时如何打开链接。 link

Answer 1

您可以通过在包含元素上放置点击功能来使用javascript：

document.getElementById("media-holder").onclick = function () {
    location.href = "https://google.com";
};

#media-holder {
  cursor:pointer;
}

<div id="media-holder">
  <img src="https://i.giphy.com/media/l2Sqc3POpzkj5r8SQ/giphy.webp" />
</div>

或者您可以将元素包装在锚标记中：

<a href="https://google.com">
      <img src="https://i.giphy.com/media/l2Sqc3POpzkj5r8SQ/giphy.webp" />
</a>

Answer 2

我通过Freezeframe.js库解决了我的问题。

演示：https://ctrl-freaks.github.io/freezeframe.js/ GitHub：https://github.com/ctrl-freaks/freezeframe.js/

在悬停事件上，gif停止，并且每个可单击元素上的链接都有静态位置。