Изменение картинки
Изменить картинку можно, только присвоив свойству src встроенного объекта Image новое значение. На странице "Программирование графики" показано, как это делается в простейшем случае. Очевидно, что медленная перезагрузка картинки с сервера не позволяет реализовать быстрое листание. Попробуем решить эту проблему.
Собственно, решение заключается в разведении по времени подкачки картинки и ее отображения. Для этой цели используют конструктор объекта Image:
<TABLE> <TD> <A HREF="javascript:void(0)"; onMouseover="document.m0.src=color[0].src; return true;" onMouseout="document.m0.src=mono[0].src; return true;"> <IMG NAME=m0 SRC="images0.gif" border=0> </A> </TD> ... </TABLE>
Фрагмент кода показывает типовой прием замещения и восстановления картинки при проходе курсора мыши. Естественно, что менять можно не одну, а сразу несколько картинок.
Главное, тем не менее, не в том, что картинки замещаются, а в том, с какой скоростью они это делают. Для достижения нужного результата в начале страницы создаются массивы картинок, в которые перед отображением перекачивается графика (обратите внимание на строку статуса при загрузке страницы):
color = new Array(32); mono = new Array(32); for(i=0;i<32;i++) { mono[i] = new Image(); color[i] = new Image(); if(i.toString().length==2) { mono[i].src = "images0"+i+".gif"; color[i].src = "images0"+i+".gif"; } else { mono[i].src = "images00"+i+".gif"; color[i].src = "images00"+i+".gif"; } }
Еще один характерный прием — применение функции отложенного исполнения JavaScript-кода (eval()):
function def() { for(i=0;i<32;i++) { eval("document.m"+i+".src=mono["+i+"].src"); } for(i=0;i<5;i++) { eval("document.r"+i+".src=rm["+i+"].src"); } }
В данном случае eval() избавляет нас от необходимости набирать операции присваивания (32 строки — это не фунт изюму).
