Javascript графика.

«Работа с графикой» – десятый урок учебника JavaScript. В этом уроке мы обсудим основные приемы работы с графическими изображениями в JavaScript: научимся создавать изображения и производить детальную настройку их отображения.

Javascript графика: Объект Image.

Пожалуй, одной из самых интерестных и зрелищных сфер использования языка JavaScript является работа с графикой. Использование JS позволяет добиться действительно красивых эффектов и некоторые из них мы рассмотрим с вами в этом уроке:

Вся работа с графикой в JavaScript опирается на объект image, который обладает следующими свойствами:

• border
• complete
• height
• hspace
• name
• src
• vspace
• width
• lowsrc

Для начала, предлагаю вам рассмотреть простенький пример:

<A HREF="javascript:void(0);" onClick="window.alert('картинка называется:'+ document.kirpitch.name)"> <IMG SRC=../img/kamen.gif NAME=kirpitch width="100" height="101" BORDER=0> </A>

Наверх

В данном примере мы создаем простую картинку средствами HTML и присваиваем ей некоторое имя. Далее делаем ее ссылкой, при нажатии на которую JS выдаст окно предупреждения с именем этой картинки. Нечто подобное мы уже делали с вами в предыдущем уроке.

Javascript графика: src и lowsrc.

Свойства src и lowsrc позволяют определить адреса изображений, используемых на странице, причем src отвечает за адрес картинки, которая будет использованна после полной загрузки, а lowsrc – за адрес картинки, которая будет показанна во время загрузки основной.

Програмист в любой момент может изменить адрес картинки используя следующий JavaScript код:

document.i2.src="new_image.gif";

где i2 – идентификатор изображения на странице, а "new_image.gif" – url адрес нового изображения

Изменение картинки.

Мы можем в реальном времени изменять картинки на странице путем присваивания атрибуту src различных значений.

Одним из наиболее распространенных способов использования этого приема является замена картинки при наведении курсора мыши:

<A HREF="javascript:void(0)"; onMouseover="document.im0.src='../img/DELENIE.png'; return true;" onMouseout="document.im0.src='../img/POLOSA_1.png'; return true;"> <IMG NAME=im0 SRC="../img/POLOSA_1.png" border=0> </A>

Наверх

Теперь при наведении мыши на изображение, оно в реальном времени будет заменено на другое и наоборот. Подобный прием используется для создания объемных эффектов, динамических интерфейсов и дружелюбных меню навигации средствами JS.

В этом уроке мы рассмотрели простейшие приемы работы с Javascript графикой. Конечно, JS позволяет создавать значительно более сложные и красивые графические эффекты, но такое углубление не является целью нашего учебника.

То что нам действительно необходимо, это создание собственного сайта с использованием основных средств програмирования.

В следующем уроке мы продолжим углубляться в методы работы с графикой JS, а именно мы поговорим о создании мультипликации. Не пропустите.

Урок 9: Схема URL – JavaScript

Урок 10: Javascript графикаt

Урок 11: Мультипликация