<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ border: 0; margin: 0; ">#f6f6f6; } img{ float: left; } </style></head><body> <img src="images/00.png" alt=""> <img src="images/00.png" alt=""> <img src="images/00.png" alt=""> <img src="images/00.png" alt=""> <img src="images/00.png" alt=""><script> var imgs = document.images; for (var i = 0; i < imgs.length; i++) { imgs[i].a = i; imgs[i].onmouseover = function () { // alert(123) for (var j = 0; j <= this.a; j++) { // alert(123); imgs[j].src = imgs[j].src.replace('00', '01') for (var k = 1; k <= this.a-1; k++) { imgs[j].src = imgs[j].src.replace('01', '02') for (var b = imgs.length + 1; b <= this.a + 2; b++) { imgs[j].src = imgs[j].src.replace('02', '03') } } if (this.a-imgs.length){ // alert(123) imgs[j].onmouseout = function (){ // alert(123) for(var j=0;j<=this.a;j++){ imgs[j].src = imgs[j].src.replace('01','00') imgs[j].src = imgs[j].src.replace('02','00') imgs[j].src = imgs[j].src.replace('03','00') // alert(123) } } } } } }</script></body></html>