Ротатор картинок на javascript при наведении мыши, движок

Много раз встречал на сайтах тему с анимацией кадров из видео.
По просьбе одного паренька решил написать небольшой универсальный движок.

За основу этого движка я взял файлы javascript описанные в этом посте

У нас есть 2 картинки
Первая это первый кадр из второй картинки

|1кадр|

Вторая картинка с множеством кадров

|1кадр|2кадр|3кадр|4кадр|5кадр|...|

Для простоты представим что во второй картинке кадры из фильма через определенные промежутки времени.

При загрузке сайта, пользователь должен видеть только первую картинку.
Это обеспечит быструю загрузку сайта.
При наведении мыши на первую картинку, пользователю будет показана анимация загрузки и начнется загрузка второй картинки с кадрами.
Как только вторая картинка загрузится. начнется ее анимация, и будет продолжаться до тех пор, пока пользователь не уберет указатель мыши с картинки.

Сам код не особо и сложный

<script type="text/javascript" src="core_engine/scriptjava.js"></script>
<script type="text/javascript" src="core_engine/cartoon_image.js"></script>

<style type="text/css">
#r_pic1 {
	position:relative;
	border:1px solid #000000;
	cursor:pointer;
	width:160px;
	height:120px;
	background-image:url(ss1.jpg);
}
#r_pic2 {
	position:relative;
	top:10px;
	border:1px solid #000000;
	cursor:pointer;
	width:160px;
	height:120px;
	background-image:url(ss1.jpg);
}
</style>



<div id="r_pic1">
	<img id="r_img_pic1" border="0" />
</div>

<div id="r_pic2">
	<img id="r_img_pic2" border="0" />
</div>

<script type="text/javascript">
//сначала прописываем по порядку
//1- id div элемента
//2- id img элемента
//3- адрес на картинку с кадрами
//4- ширина картинки с кадрами в пикселях
//5- высота картинки с кадрами в пикселях
//6- число кадров по горизонтали
//7- число кадров по вертикали
//8- скорость анимации, количество кадров в секунду
//9- изображение загрузки
//10- смещение изображения загрузки слева в пикселях
//11- смещение изображения загрузки сверху в пикселях

var settings =  [];
settings[0] = ['r_pic1','r_img_pic1','s1.jpg',1600,120,10,1,5,'l1.gif',72,52];
settings[1] = ['r_pic2','r_img_pic2','s2.jpg',1600,120,10,1,5,'l1.gif',72,52];


//все что дальше не трогаем!!!
for(var i=0;i<settings.length;i++) {
(function (id_div,id_img,src_img,img_w,img_h,img_x,img_y,img_fps,src_img_l,img_l_l,img_l_t) {
var slide_img;
var load_img = function () {
	slide_img=new Image()
	slide_img.onload = function () {
		$$(id_img,'visibility','visible');
		r_pic1_set();
		$$(id_div).removeChild(load_pic);
	}
	slide_img.src=src_img;
}

var cartoon_image1;
var r_pic1_set = function() {
	cartoon_image1=new cartoon_image();
	cartoon_image1.play({
			id:[id_div,id_img],//id div элемента и img элемента
			src:slide_img.src,//ссылка на изображение
			frames_x:img_x,//количество кадров на изображении по x
			frames_y:img_y,//количество кадров на изображении по y
			width:img_w,//ширина изображения
			height:img_h,//высота изображения
			fps:img_fps,//скорость показа кадров в секунду, можно писать дробные числа
			reverse:false,//если true то проигрывается с конца в начало
			playandstop:false,//если true то проиграть 1 раз и передать управление функции next
			next: function () {//выполнится только если playandstop==true
				//сюда можно пысать следующий код который будет выполняться после завершения анимации
			}
		});
}


var load_pic;
var on_mouseover_1 = function () {
load_pic=$$i({
  create:'img',
  attribute: {
    'style':'position:absolute; left:'+img_l_l+'px; top:'+img_l_t+'px;','src':src_img_l
  },
  insert:$$(id_div)
});
//настройки для старого осла
$$(load_pic).$$('position','absolute').$$('left',img_l_l+'px').$$('top',img_l_t+'px');
$$(load_pic).src=src_img_l;

	load_img();
}


var on_mouseout_1 = function () {
	cartoon_image1.stop();
	$$(id_img,'visibility','hidden');
}

$$r(function() {//если документ полностью загрузился выполняю код
	
	//добавляю события кнопкам при нажатии
	$$e.add($$(id_div),'mouseover',on_mouseover_1);
	$$e.add($$(id_div),'mouseout',on_mouseout_1);
	
	$$(id_img,'visibility','hidden');
	
});

})(settings[i][0],settings[i][1],settings[i][2],settings[i][3],settings[i][4],settings[i][5],settings[i][6],settings[i][7],settings[i][8],settings[i][9],settings[i][10]);
}
</script>

Теперь расскажу как им пользоваться.
На том месте где будет картинка нужно поместить такой вот код

<div id="r_pic1">
    <img id="r_img_pic1" border="0" />
</div>

Обратите внимание что id нужно придумывать каждый раз новое.

Дальше для этого элемента нужно прописать стиль

#r_pic1 {
	position:relative;
	border:1px solid #000000;
	cursor:pointer;
	width:160px;
	height:120px;
	background-image:url(ss1.jpg);
}

После чего добавить в скрипт строку массив с следующим номером по порядку

settings[0] = ['r_pic1','r_img_pic1','s1.jpg',1600,120,10,1,5,'l1.gif',72,52];

Каждый параметр в этом массиве означает следующие (пронумеровано по порядку)

что означает каждый параметр?
1- id div элемента
2- id img элемента
3- адрес на картинку с кадрами
4- ширина картинки с кадрами в пикселях
5- высота картинки с кадрами в пикселях
6- число кадров по горизонтали
7- число кадров по вертикали
8- скорость анимации, количество кадров в секунду
9- изображение загрузки
10- смещение изображения загрузки слева в пикселях
11- смещение изображения загрузки сверху в пикселях

Рабочий пример можно скачать отсюда

Автор: olololchik