用动态webp替换<picture> src onmouseover

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";

(为了好玩，我将onmouseover事件添加到img标记中。但只有在禁用.avif浏览器支持以便显示jpg的情况下，这才有效。)

我如何用图片元素实现图像替换onmouseover，从而使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>