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