Анимация картинки при наведении курсора на javascript.

Ротатор rotator картинок на javascript.
Я не раз встречал сайты с картинками, при наведении курсора на которые, картинка превращалась в анимацию.

Для чего это нужно?
В первую очередь для того чтобы сайт быстрее загружался.
Ведь намного проще вначале показать пользователю первый кадр из покадровой анимации

|1кадр|

чем сразу загружать целиком картинку с кадрами

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

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

Обычно такой эффект достигается flash анимацией.
Но я решил реализовать это дело на javascript.

Чтобы упростить программирование, я включил в свой проект scriptjava фреймворк, а так же движок покадровой анимации из топика
http://javascript.ru/blog/gordon-freeman/Kartinka-s-kadrami-javascript-S...

В итоге у меня получился следующий код

<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>

и прописать для него css стиль

#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- смещение изображения загрузки сверху в пикселях

Вот и все.

Рабочий пример вы можете скачать по ссылке:

Скачать пример

Благодаря scriptjava и готовому движку мы получили простой рабочий код.