I run it on Chrome
My problem -
After the mouse touches all the images, even if onmouseout from one image, all images change at the same time
I do not understand why this is
<!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>Image Source info
artist:Sevarihk
Original:https://opengameart.org/content/animated-bamboo-door-sprite
[dor_1.gif][1]
[door_1_close.gif][2]
[door_1_open.gif][3]
This is because both <img> represent the same and only internal gif image. When you do set the <img>'s src to that URL again, the gif animation is reloaded, as per specs. But it is reloaded for all instances of this image.
You can avoid that by tricking the browser in thinking both images are separate, e.g by appending a query-param to the URL:
(Notice the ?A and ?B I added at the end of the URL in the mouseout event handlers).
<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'">But this means the image is actually loaded twice...