Основы Web-инжиниринга. Часть 1. Громов Ю.Ю - 96 стр.

UptoLike

ВУЗ: 

ТГТУ | Тамбов

Составители: 

Рубрика: 

Несмотря на такое обилие свойств, их абсолютное большинство можно только читать, но не изменять. Об этом свиде-
тельствует, прежде всего, отсутствие методов. Но два свойства все же можно изменять: src и lowsrc. Этого оказывается
достаточно для множества эффектов с картинками.
Все объекты класса Image можно разделить на встроенные и поро-жденные программистом. Встроенные объекты – это
картинки тегов IMG. Если эти картинки поименовать, к ним можно обращаться по имени:
<A HREF="javascript:void(0);"
onClick="window.alert('Image name:'+
document.images[0].name)">
<IMG NAME=tstu SRC=images.gif BORDER=0>
</A>
Картинка активна. Если на нее нажать, получим имя тега IMG. Обращение document.images[0].name позволяет
распечатать это имя в окне предупреждения. При этом само имя указано как name=tstu в теге IMG.
К встроенному графическому объекту можно обратиться и по индексу:
document.images[0];
В данном случае images[0] – это первая картинка документа.
Свойства 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";
}
}

Страницы