Знакомства на Just click it
Скоро новый год!
Онлайн радио
Вверх
Новые статьи
Likes Kaufen . Смотрите подробности Кабель КГ тут.

Ретро газета в подарок
Архив

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

 

назад
далее
Наверх
Источник: Создание сайтов
Мы В Контакте Мы на Facebook Лента новостей RSS
Копирование и публикация материалов сайта разрешены только при наличии активной ссылки на источник
2011 - наши дни.. © Контакты | Лого | Реклама на сайте | Вебмастерам