Объект Image
Наиболее зрелищные эффекты при программировании на JavaScript достигаются при работе с графикой. При этом в арсенале программиста не так уж много инструментов: встроенные в документ картинки, возможность генерации объекта Image, комбинирование картинок с гипертекстовыми ссылками и таблицами. Тем не менее обилие различных эффектов, которые достигаются этими нехитрыми средствами, впечатляет.
Программирование графики в JavaScript опирается на объект Image, который характеризуется следующими свойствами, методами и событиями:
Свойства |
Методы |
События |
border
complete
height
hspace
name
src
vspace
width
lowsrc
|
нет |
onAbort
onError
onLoad
|
Несмотря на такое обилие свойств, их абсолютное большинство можно только читать, но не изменять. Об этом свидетельствует, прежде всего, отсутствие методов. Но два свойства все же можно изменять: src и lowsrc. Этого оказывается достаточно для множества эффектов с картинками.
Все объекты класса Image можно разделить на встроенные и порожденные программистом. Встроенные объекты — это картинки контейнеров IMG. Если эти картинки поименовать, к ним можно обращаться по имени:
<A HREF="javascript:void(0);" onClick="window.alert('Image name:'+document.images[0].name)">
<IMG NAME=intuit SRC=images.gif BORDER=0>
</A>
Картинка активна. Если на нее нажать, получим имя контейнера IMG. Обращение document.images[0].name позволяет распечатать это имя в окне предупреждения. При этом само имя указано как name=intuit в контейнере IMG.
К встроенному графическому объекту можно обратиться и по индексу:
document.images[0].name;
В данном случае images[0] — это первая картинка документа.
src и lowsrc
Свойства src и lowsrc определяют URL изображения, которое монтируется внутрь документа. При этом lowsrc определяет временное изображение, обычно маленькое, которое отображается, пока загружается основное изображение, чей URL указывается в атрибуте SRC контейнера IMG. Свойство src принимает значение атрибута SRC контейнера IMG. Программист может изменять значения и src, и lowsrc. Рассмотрим пример с src:
document.i2.src="images2.gif";
Как видно из этого примера, существует возможность модифицировать вмонтированную картинку за счет изменения значения свойства src встроенного объекта Image. Если вы в первый раз просматриваете данную страницу (т.е. картинки не закешированы браузером), то постепенное изменение картинки будет заметно. Как ускорить это изменение, мы рассмотрим в следующем разделе.
Изменение картинки
Изменить картинку можно, только присвоив свойству 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 = "images0"+i+".gif";
color[i].src = "images0"+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 строки — это не фунт изюму).
|