将<picture>鼠标悬停上的 src 替换为动画 webp

Question

我有一个带有 2 张图像的<picture>元素。.avif映像和.jpg回退。

<picture id="mouse-event" onmouseover="this.src='/animated.webp'">
<source type="image/avif" srcset="/sm.avif">
<img src="/sm.jpg">
</picture>

当我将鼠标移到<picture>元素上时，我想用动画.webp替换显示的图像(将鼠标移动到 youtube 缩略图悬停)。

我尝试在图片元素上放onmouseover，但这不起作用。

我也尝试用javascript替换src，但没有成功：

document.getElementById("mouse-event").src = "/animated.webp";

(只是为了好玩，我将鼠标悬停事件添加到 img 标签中。这有效，但前提是我禁用浏览器对 .avif 的支持，以便显示 jpg。

如何在鼠标悬停时用图片元素替换图像，以便仍然可以回退 avif/jpg ？

Answer 1

您需要替换img元素的src或source元素的srcset，而不是picture元素的src。

例如

<picture id="mouse-event" onmouseover="doMouseover()">
<source type="image/avif" srcset="/sm.avif">
<img id="theImage" src="/sm.jpg">
</picture>
<script>
function doMouseover() {
document.getElementById("theImage").src = "/animated.webp";
}
</script>