Разработка магазинов с гарантией попадания в ТОП поисковых систем

Узнать подробнее
Eltisbook > Java Script учебник > Javascript графика.

Javascript графика.

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

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

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

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

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

<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>
Кирпич

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

Свойства 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, а именно мы поговорим о создании мультипликации. Не пропустите.