Lo ejecuto en Chrome
Mi problema: después de que el mouse toca todas las imágenes, incluso si el onmouseout está fuera de una imagen, todas las imágenes cambian al mismo tiempo
no entiendo porque es esto
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <img src="https://i.stack.imgur.com/iYL3x.gif" onmouseover="this.src='https://i.stack.imgur.com/ht3Jw.gif'" onmouseout="this.src='https://i.stack.imgur.com/lmBrB.gif'"> <img src="https://i.stack.imgur.com/iYL3x.gif" onmouseover="this.src='https://i.stack.imgur.com/ht3Jw.gif'" onmouseout="this.src='https://i.stack.imgur.com/lmBrB.gif'"> </body> </html>Información de la fuente de la imagen
artista:Sevarihk
Original: https://opengameart.org/content/animated-bamboo-door-sprite
[dor_1.gif][1] [door_1_close.gif][2] [door_1_open.gif][3]Esto se debe a que ambos <img> representan la misma y única imagen gif interna. Cuando configura el src de <img> en esa URL nuevamente, la animación gif se vuelve a cargar, según las especificaciones . Pero se recarga para todas las instancias de esta imagen.
Puede evitar eso engañando al navegador para que piense que ambas imágenes están separadas, por ejemplo, agregando un parámetro de consulta a la URL:
(Observe los ?A y ?B que agregué al final de la URL en los controladores de eventos mouseout ).
<img src="https://i.stack.imgur.com/iYL3x.gif" onmouseover="this.src='https://i.stack.imgur.com/ht3Jw.gif'" onmouseout="this.src='https://i.stack.imgur.com/lmBrB.gif?A'"> <img src="https://i.stack.imgur.com/iYL3x.gif" onmouseover="this.src='https://i.stack.imgur.com/ht3Jw.gif'" onmouseout="this.src='https://i.stack.imgur.com/lmBrB.gif?B'">Pero esto significa que la imagen se carga dos veces...