Интернет Университет информационных технологий  Расскажи
про свой ВУЗ!
www.intuit.ru
мои курсы мои настройки моя корзина помощь
  Лекции
Введение в JavaScript
(архив: ZIP)
1.   Назначение и применение JavaScri...
2.   Программируем свойства окна брау...
3.   Программируем формы
4.   Программируем графику
5.   Программируем гипертекстовые пер...
6.   Программируем "за кадром"
    Экзамен
    Сдать экзамен экстерном
    Литература

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

Введение в JavaScript
Лекция #4: Программируем графику
Страницы: 1 | 2 | 3 | 4 | вопросы | » | HTML для печати | PDF | ZIP
  Если Вы заметили ошибку на этой странице - сообщите нам.  

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

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