Интернет Университет информационных технологий www.intuit.ru
мои курсы мои настройки моя корзина помощь
  Лекции
Основы web-технологий
Глава 1.
Введение в HTML-разметку
Глава 2.
Применение каскадных таблиц стилей
Глава 3.
JavaScript
  13.   Назначение и применение JavaScri...
  14.   Программируем свойства окна брау...
  15.   Программируем формы
  16.   Программируем графику
  17.   Программируем гипертекстовые пер...
  18.   Программируем "за кадром"
Глава 4.
Интерфейс Web-приложений
      Экзамен
      Ссылки к курсу

  Общение
однокурсники
форум по курсу
вопрос преподавателю

Основы web-технологий
Глава 3. JavaScript версия для печати: HTML, PDF
Лекция #16: Программируем графику Страницы: 1 2 3 4 вопросы »

Объект 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 строки — это не фунт изюму).

    Перейти к следующей странице »
    версия для печати: HTML, PDF
    Страницы: 1 2 3 4 вопросы »
      Основные понятия
    Графика, IMG, загрузка картинок, отображение картинок, смена картинок события.
     
      Информация о лекции
    В этой лекции рассказано о приемах программирования изменений графических образов на HTML-страницах. Подробно разбираются основные приемы программирования образов и приводятся примеры.
     
      Информация о главе
    Глава 3. JavaScript
    Курс посвящен изучению языка программирования JavaScrip. Главное внимание уделяется логике разработки JavaScript-кода и основным принципам его использования на страницах World Wide Web.
     
      Учебники к курсу
    Основы web-технологий
    Основы web-технологий
    Храмцов П.Б., Брик С.А., Русак А.М., Сурин А.И.,
    Интернет-университет информационных технологий - ИНТУИТ.ру.
    Курс лекций посвящен основам Web-технологий. В его рамках рассматриваются язык гипертекстовой разметки HTML, язык программирования динамического контента JavaScript, спецификация разработки прикладного программного обеспечения CGI и спецификация описания стилей представления информации CSS. Допущено УМО в области прикладной информатики для студентов высших учебных заведений, обучающихся по специальности 351400 "Прикладная информатика".
    Dynamic HTML
    Айзекс С., BHV-Санкт-Петербург.
    Настольная книга Web-мастера: эффективное применение HTML, CSS и JavaScript
    Коржинский С.Н., КноРус.
    Практические занятия по HTML. Краткий курс
    Будилов В.А., Наука и техника.
    все книги по курсу »