Tengo un elemento <picture> con 2 imágenes. Una imagen .avif y un respaldo .jpg .
<picture id="mouse-event" onmouseover="this.src='/animated.webp'"> <source type="image/avif" srcset="/sm.avif"> <img src="/sm.jpg"> </picture> Cuando muevo el mouse sobre el elemento <picture> , quiero reemplazar la imagen que se muestra con un .webp animado (similar al desplazamiento de la miniatura de YouTube).
Intenté colocar el onmouseover sobre el elemento de la imagen, pero no funcionó.
También intenté reemplazar el src con javascript sin éxito:
document.getElementById("mouse-event").src = "/animated.webp";(Solo por diversión, agregué el evento onmouseover a la etiqueta img. Eso funciona, pero solo si deshabilito la compatibilidad del navegador con .avif para que se muestre el jpg).
¿Cómo puedo lograr un reemplazo de imagen al pasar el mouse por encima con un elemento de imagen para que el respaldo avif/jpg aún sea posible?
Debe reemplazar el src del elemento img o el srcset del elemento source , no el src del elemento de picture .
Por ejemplo
<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>