Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.
Нажимай и поддержи.

Пн Вт Ср Чт Пт Сб Вс
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30


Чувашия-это моя Россия

Ссылки на JavaScript - image.

Определение и использование. Объект image представляет собой внедренное изображение. Для каждого тега < img> в HTML документе создается объект изображения. Обратите внимание, что изображения связаны с HTML страницой. Тег < img> создает отдельное пространство для ссылочного изображения.

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

Это все возможно только в современных версиях браузеров, где поддерживается много интересных находок интернет-программистов, где поддерживается HTML-5, CSS-3.

Каким образом можно скриптами языка JavaScript перетаскивать изображения на страницы Вашего сайта, то есть сделать ссылки на необходимые изображения или графические находки для оформления Вашего сайта?

В языкt JavaScript все изображения предстают в виде массива изображений. Массив изображений называется images и является свойством объекта document дерева DOM Вашего сайта. Конкретно каждое изображение на web-странице получает порядковый номер: первое изображение получает номер 0, второе - номер 1 и т.д. Значит, к первому изображению из массива изображений можно адресоваться( ссылаться), если написать document.images[0].

Каждое изображение в HTML-документе рассматривается в качестве объекта image. Объект image обладает свойствами, к которым и можно ссылаться из языка JavaScript - определить размер изображений, обратившись к свойствам width и height. Согласно кода сценария document.images[0].width запросто определить ширину первого изображения на страницах сайта в px( пикселях).

Отслеживать индекс всех изображений возможно назначением изображениям своих собственных имен:


< img src="img.gif" name="myImage" width=120 height=120>

Тогда Вы сможете обращаться к изображению, написав document.myImage или document.images["myImage"].

Для осуществлении смены изображений на web-странице потребуется атрибут src. Как и с элементом < img>, атрибут src содержит адрес представленного изображения. Вы можете назначать новый адрес изображению, уже загруженному в web-страницу. И в результате, изображение будет загружено с нового адреса, заменив на web-странице старое:


< img src="img1.gif" name="myImage" width=120 height=120>

При этом загружается изображение img1.gif и получает имя myImage. В следующей строке прежнее изображение img1.gif заменяется уже на новое - img2.gif:


document.myImage.src= "img2.src";

Новое изображение постоянно получает тот же размер, что был у первоначльного img.gif. И Вы уже не можете изменить размер поля, в котором это изображение размещается.

Один из недостатков такой загрузки изображений заключается в том, что после записи в src нового адреса начинает процесс загрузки соответствующего изображения. И поскольку этого не было сделано заранее, то еще пройдет некоторое время, прежде чем новое изображение будет передано через Интернет и встанет на свое место. В некоторых ситуациях такое не вредит удобству и качеству для посетителей сайта, однако часто подобные задержки неприемлемы. Чтобы не было проблемы, нужна упреждающая загрузка изображения. Для этого надо создать новый объект image:


hiddenImg= new Image();
hiddenImg.src= "img3.gif";

В первой строке создается новый объект Image. Во второй строке указывается адрес изображения, которое в дальнейшем будет представлено с помощью объекта hiddenImg. Такая запись нового адреса в атрибуте src заставляет браузер загружать изображение с указанного адреса. Поэтому, когда выполняется вторая строка нашего примера, начинает загружаться изображение img2.gif. Но как подразумевается самим названием hiddenImg - скрытая картинка и как браузер закончит загрузку, изображение на экране не появится. Изображение будет сохранено в памяти компьютера( в кэше) для последующего использования. Чтобы вызвать изображение на экран надо воспользоваться строкой:


document.myImage.src= hiddenImg.src;

Сейчас изображение немедленно извлекается из кэша и показывается на экране. Значит, теперь управляем упреждающей загрузкой изображения.

Браузер должен к моменту запроса закончить упреждающую загрузку, чтобы необходимое изображение было показано без задержки. Значит, Вы должны предварительно загрузить большое количество изображений.

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


< a href="#" 
  onMouseOver="document.myImage2.src='img2.gif'" onMouseOut="document.myImage2.src='img1.gif'">
< img src="img1.gif" name="myImage2" width=200 height=100 border=0>

Могут возникнуть некоторые проблемы. Второе изображение не было загружено. Для этого должны писать новые команды для каждого изображения на web-странице.

Хочется иметь такой JavaScript, который раз и навсегда освободил Вас об этих проблемах. Работал и загружал и выгружал сам по себе без Вашего вмешательства.

Чтобы скрипт сохранял свою гибкость, следует соблюдать два условия. Не оговоривается количество изображений - не должно иметь значения, сколько их используется. Не оговоривается порядок следования изображений - должна существовать возможность изменять этот порядок без изменения самого кода:


< html>
< head>

< script language="JavaScript">
  var browserOK = false;
  var pics;
< /script>
< script language="JavaScript1.1">
  browserOK = true;
  pics = new Array();
< /script>
< script language="JavaScript">
  var objCount = 0; // количество изображений на странице 
function preload(name, first, second) {  
  // предварительная загрузка изображений, размещение их в массиве 
  if (browserOK) {     
    pics[objCount] = new Array(3);
    pics[objCount][0] = new Image();
    pics[objCount][0].src = first;
    pics[objCount][1] = new Image();
    pics[objCount][1].src = second;
    pics[objCount][2] = name;
    objCount++;
  }
}
function on(name){
  if (browserOK) {
     for (i = 0; i < objCount; i++) {
      if (document.images[pics[i][2]] != null)
        if (name != pics[i][2]) { 
          // вернуть в исходное состояние другие изображения 
          document.images[pics[i][2]].src = pics[i][0].src;
        } else {
           // показывать вторую картинку, курсор пересекает данное изображение 
           document.images[pics[i][2]].src = pics[i][1].src;
        }
    }
  }
}
function off(){
  if (browserOK) {
     for (i = 0; i < objCount; i++) {
      // вернуть в исходное состояние  изображения 
      if (document.images[pics[i][2]] != null) 
        document.images[pics[i][2]].src = pics[i][0].src;
    }
  }
}
preload("link1", "img1f.gif", "img1t.gif");
preload("link2", "img2f.gif", "img2t.gif");
preload("link3", "img3f.gif", "img3t.gif");

< /script>
< /head>
< body>
< a href="link1.htm" onMouseOver="on('link1')" onMouseOut="off()">
< img name="link1" src="link1f.gif" width="200" height="100" border="0">< /a>

< a href="link2.htm" onMouseOver="on('link2')" onMouseOut="off()">
< img name="link2" src="link2f.gif" width="200" height="100" border="0">< /a>

< a href="link3.htm" onMouseOver="on('link3')" onMouseOut="off()">
< img name="link3" src="link3f.gif" width="200" height="100" border="0">< /a>
  
< /body>
< /html>

Написанный скрипт сценария представления изображений помещает все изображения в массив pics. Создает такой массив функция preload(), которая вызвается в самом начале. Вызов функции preload() выглядит просто:


preload("link1", "img1f.gif", "img1t.gif");

Означает, что скрипт должен загрузить с сервера два изображения: img1f.gif и img1t.gif. Первое из них - это та картинка, которая будет представлена, пока курсор мыши не попадает в область изображение. Когда же пользователь помещает курсор мыши на изображение, тогда появляется вторая картинка на странице сайта. При вызове функции preload() в качестве первого аргумента пишем слово "link1" и этим задаем объект image, которому и будут принадлежать оба предварительно загруженных изображения.

Когда посмотрите в раздел < body>, тогда обнаружите изображение с тем же именем link1, то есть используем не порядковый номер, но имя изображения для того, чтобы иметь возможность переставлять изображения на страницах сайта, не переписывая при этом сам скрипт.

Функции on() и off() вызываются посредством программ обработки событий onMouseOver и onMouseOut. Поскольку сам элемент image не может отслеживать события MouseOver и MouseOut, постольку обязаны сделать на этих изображениях еще и ссылки.

Функция on() возвращает все изображения, кроме указанного, в исходное состояние. Делать это необходимо потому, что в противном случае выделенными будут сразу несколько изображений.

Универсальная программа для просмотра трех картин готова. Вам останется создать массив изображений в корневом каталоге выделив папку pics и залинковать по адресам ссылки на этот массив согласно порядка загрузки фотографий и в соответствии именам картинок. И все. Тогда те < div> от img исчезнут и Вы можете поочередно загружать Ваши картинки на страницу сайта.

Изображения Свойства Объекты

Свойства Описание
align В HTML5 не поддерживается. Использовать style.cssFloat.
Задает или возвращает значение атрибута align изображения
alt< Устанавливает или возвращает значение атрибута alt изображения
border В HTML5 не поддерживается. Использовать style.border.
Задает или возвращает значение атрибута границы изображения
complete Возвращает ли браузер окончания загрузки изображения
height Устанавливает или возвращает значение атрибута высоты изображения
hspace В HTML5 не поддерживается. Использовать style.margin.
Задает или возвращает значение атрибут hspace изображения
longDesc В HTML5 не поддерживается.
Задает или возвращает значение longdesc изображения
name В HTML5 не поддерживается. Использовать вместо id.
Задает или возвращает значение атрибута name изображения
src Устанавливает или возвращает значение атрибута src изображения
useMap Устанавливает или возвращает значение атрибута usemap изображения
vspace В HTML5 не поддерживается. Использовать style.margin.
Задает или возвращает значение атрибут vspace изображения
width Устанавливает или возвращает значение атрибута width изображения


seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...
ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: