Веб-программирование

Обучение программированию

Делаете первые шаги в программировании? Представляем вашему вниманию пошаговое обучение самостоятельного создания сайтов любой сложности на примерах! На страницах сайта KobRU вы найдете все самое необходимое, для того чтобы по праву считаться веб-мастером по созданию привлекательных динамически изменяемых интернет-страниц, используя основные инструменты веб-разработчиков: HTML; CSS; PHP; MySQL; JAVASCRIPT и другие. Сайт KobRU - наиболее полное и качественно структурированное руководство с предельно понятными пояснениями и поэтапным изложением материала, который поможет вам в совершенстве овладеть искусством программирования. Добавьте динамики и интерактивность в свои веб-проекты!

Вход в личный кабинет

Забыли пароль?

Не зарегистрированны?


Конструкторское Web-бюро
13.01 img javascript Изображения

Автор: Denisido

Дата: 2011-01-08

Графические изображения (img) с точки зрения javascript

Каждое графическое изображение на странице представлено как экземпляр объекта HTMLImageElement, потомка HTMLElement.

Свойства и события объекта HTMLImageElement

Свойство src

Данное свойство возвращает или задает место хранение файла где лежит графическое изображение:

<img id="img_1" src="images/first.jpg" />
// javascript img src
  
var img1 = document.getElementById('img_1'); // получаем доступ к элементу
img1.src = 'images/second.jpg';              // javascript img src производим замену

С таким же успехом мы можем применить и изученный нами ранее метод setAttribute(). Чтобы было нагляднее, напишем две функции, одну из которых назовем overMouseImg.Ее суть в том, когда мы наводим мышкой на изображение, будет изменяться атрибут SRC (путь к картинке). Вторую функцию обзовем outMouseImg, суть которой возвращать исходное изображение при уводе курсора мышки с изображения:

<img id="img_1" src="images/1.jpg" />
// javascript img src
  
	if(window.addEventListener)	{
					window.addEventListener('load',afterLoad,false);
					}
	else				{
					window.attachEvent('onload',afterLoad);
					}; // end if else window onload
function afterLoad() {
	var img1 = document.getElementById('img_1');
	if(img1.addEventListener)	{
					img1.addEventListener('mouseover',overMouseImg,false);
					img1.addEventListener('mouseout',outMouseImg,false);
					}
	else				{
					img1.attachEvent('onmouseover',overMouseImg);
					img1.attachEvent('onmouseout',outMouseImg);
					}; // end if else
}; // end func afterLoad
function overMouseImg() {
			var img1 = document.getElementById('img_1');
			img1.setAttribute('src','images/2.jpg');
			}; // end overMouseImg function
function outMouseImg() {
			var img1 = document.getElementById('img_1');
			img1.setAttribute('src','images/1.jpg');
			}; // end outMouseImg function

На первый взгляд может показаться, что скрипт готов. Так-то так, но остается решить один важный вопрос. Дело в том, что если пользователь имеет не быстрое интернет соединение и первый раз будет совершать подмену изображения, то в кэше Web-обозревателя это изображение пока не существует, следовательно, пользователь может вместо картинки увидеть пустой прямоугольник, как обычно это бывает, если отключить показ графических изображений. Давайте рассмотрим как нам произвести предзагрузку подменяемого изображения, чтобы оно попало в кэш и не пришлось за ним лезть в интернет. Для этих целей поместим в секцию заголовка страницы загрузочный сценарий, где присвоим интернет-адрес файла загружаемого изображения. Важно также знать, что для браузера объекта HTMLImageElement не существует, существует объект Image, который исполняет те же функции:

Javascript пример!
// javascript img src
  
var preLoadImg = document.createElement('img'); // выполняем предзагрузку изображения
preLoadImg.setAttribute('src','images/2.jpg');  // и присваиваем адрес изображения
// или 2-й вариант
// var preLoadImg = new Image();
// preLoadImg.src = 'images/2.jpg';
//window.onload = afterLoad; ......
	if(window.addEventListener)	{
					window.addEventListener('load',afterLoad,false);
					}
	else				{
					window.attachEvent('onload',afterLoad);
					}; // end if else window onload
function afterLoad() {
	var img1 = document.getElementById('img_1');
	if(img1.addEventListener)	{
			img1.addEventListener('mouseover',overMouseImg,false);
			img1.addEventListener('mouseout',outMouseImg,false);
					}
	else				{
			img1.attachEvent('onmouseover',overMouseImg);
			img1.attachEvent('onmouseout',outMouseImg);
					}; // end if else
}; // end func afterLoad
function overMouseImg() {
			var img1 = document.getElementById('img_1');
			img1.setAttribute('src','images/2.jpg');
			}; // end overMouseImg function
function outMouseImg() {
			var img1 = document.getElementById('img_1');
			img1.setAttribute('src','images/1.jpg');
			}; // end outMouseImg function

Другой пример со сменой изображения по клику:

Javascript пример!
// javascript img src
  
var imagesMoto = ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg'];
var i = 1;
var preloadImg = [];
for(var j = 0; j < imagesMoto.length; j++)   {
                  preloadImg[j] = new Image();
                  preloadImg[j].src = imagesMoto[j];
                  }; // end for
window.onload = afterLoad;
function afterLoad() {
   var img1 = document.getElementById('img_1');
   if(img1.addEventListener)   {
               img1.addEventListener('click',clickMouseImg,false);
               }
   else            {
               img1.attachEvent('onclick',clickMouseImg);
               }; // end if else
}; // end func afterLoad
function clickMouseImg() {
         var img1 = document.getElementById('img_1');
         img1.setAttribute('src',imagesMoto[i]);
         i++;
         if(i == imagesMoto.length)    {
                     i = 0;
                     }; // end if
         }; // end clickMouseImg function

Свойство alt

Данное свойство возвращает или задает текст замены для текущего графического изображения:

// img javascript
  
var img1 = document.getElementById('img_1'); // получаем доступ к элементу
img1.alt = 'текст замены';                   // img javascript устанавливаем значение

Свойство lowsrc

Данное свойство возвращает или задает адрес файла, где хранится графическое изображение пониженного качества.

Свойство complete

Данное свойство возвращает булево значение. True указывает нам на то, что изображение загружено и выведено на страницу, и false в противном случае:

// img javascript
  
var img1 = document.getElementById('img_1'); // получаем доступ к элементу
alert(img1.complete);                        // выводит результат в модальное окно

Собитие onAbort (abort)

Данное событие возникает при прерывании загрузки изображения.

Собитие onError (error)

Данное событие возникает при неудачной загрузке изображения.

Собитие onLoad (load)

Данное событие возникает после завершения загрузки изображения.

Собитие onReadyStateChange

Данное событие возникает при изменении состояния изображения.

В добавок ко всему, объект HTMLImageElement поддерживает все события объекта HTMLElement, т.к. является его потомком.



Оцените материал по 5-ти бальной шкале: 1 2 3 4 5



Коментарии:

Коментарий добавил(а): make@tut.by
Дата: 2015-12-23

спасибо за статьи, вкралась описка "Собитие onAbort (abort)"

Добавить новый коментарий:

Текст коментария:

Введите результат с картинки

Просмотров: 27378

Метки раздела JavaScript

Основы web программирования, var javascript, javascript функции, javascript обучение, javascript простые примеры, html javascript, javascript примеры, javascript random, уроки сайтостроения, java script, регулярные выражения, appendchild javascript, javascript бесплатно, javascript document write, javascript справочник, javascript примеры.