Различия

Показаны различия между двумя версиями страницы.


Предыдущая версия
—object_image [2025/07/06 12:39] (текущий) – внешнее изменение 127.0.0.1
Строка 1: Строка 1:
 +====== Object Image ======
 +Рисунки на странице размещаются при помощи элемента <img />. В объектной модели документа каждый такой элемент представляется объектом Image. Все изображения в документе содержатся в массиве document.images.
 +
 +Для того, чтобы работать с изображением, загруженным на страницу, необходимо получить к нему доступ. Это можно сделать несколькими способами. Наиболее предпочтительным является использования свойства document.images.
 +<file>
 +<body>
 +    <img src="image.gif" name="first" />
 +</body
 +</file>
 +Доступ к изображению, добавленному в предыдущем примере можно получить следующим образом: 
 +<file>
 +image_ref1 = document.images[0];
 +image_ref2 = document.images["first"];
 +</file>
 +где image_ref2 - переменная, в которой сохраняется ссылка на изображение. 
 +
 +Кроме того, если в элемент <img /> включен атрибут id, к изображению можно получить доступ как к любому другому элементу страницы (либо используя идентификатор изображения как переменную типа Image, либо воспользовавшись методом document.getElementById() для получения ссылки на объект). 
 +
 +Получив ссылку на изображение, вы можете оперировать следующими свойствами объекта Image: 
 +
 +Свойства объекта Image
 +<file>
 +Свойство Пояснение 
 +alt Альтернативный текст 
 +complete Возвращает true, если объект загружен полностью, и false - в противном случае 
 +src Адрес загруженного в объект изображения 
 +width Ширина изображения 
 +height Высота изображения
 +</file> 
 +Кроме того, в JavaScript для объекта Image определены три события, позволяющие отслеживать загрузку изображения. Они перечислены в таблице ниже: 
 +
 +Таблица. События объекта Image Событие Причина возникновения 
 +<file>
 +load Изображение полностью загружено 
 +abort Загрузка страницы была прервана пользователем 
 +error Загрузка изображения невозможна по каким либо причинам (не найден файл изображения, формат не поддерживается браузером и т.п.)
 +</file> 
 +При необходимости (а она возникает довольно часто), объект Image можно создать средствами сценария явным образом. Для этого необходимо вызвать конструктор объекта Image(): 
 +<file>
 +image_object = new Image();
 +image_object = new Image(width, height)
 +</file>;
 +где image_object - объект Image. Конструктор Image() может вызываться с атрибутами width и height, задающими размеры загружаемого изображения. После создания объекта Image, его свойству src необходимо присвоить строку, содержащую адрес графического файла. 
 +
 +Если конструктор объекта Image был вызван с параметрами width и height, то после присваивании значения свойству src браузер начнет выполнять фоновую загрузку изображения с сервера в кэш браузера. Такой прием называется предзагрузкой изображения и используется в тех случаях, когда на страницу загружается изображение большого размера или множество небольших изображений. 
 +====== Пример. Предзагрузка изображений. ======
 +Принцип предзагрузки состоит в том, что при любом обращении к графическому (и не только) файлу на сервере, браузер скачивает его сохраняет на жестком диске в специальной папке (для браузера Microsoft Internet Explorer это папка Temporary Internet Files и папке профиля каждого пользователя). Этот процесс называется кешированием. "Время жизни" кешированных файлов определяется настройками браузера. Таким образом, нам необходимо поочередно "обратиться" ко всем нужным изображениям на сервере и дождаться окончания их загрузки, после чего разрешить пользователю работать. 
 +
 +Обеспечить кеширование графического файла можно, создав объект типа Image, в конструктор которого переданы точные размеры загружаемого изображения. После этого необходимо присвоить свойству src созданного объекта адрес требуемого графического файла. 
 +
 +Как же дождаться загрузки всех изображений? Из материала предыдущего раздела вы узнали, что при успешной загрузке изображения объект Image генерирует событие load. Таким образом, обрабатывая данное событие, мы можем накапливать в некоторой переменной (например - count) количество загруженных на данный момент изображений и выводить соответствующую информацию и лишить пользователя возможности смены изображения до окончания процесса загрузки. 
 +
 +В процессе загрузки пользователь будет видеть над изображением диагностическое сообщение о прогрессе загрузки ("Загружено N из M изображений..."). При попытке перейти на следующее изображение не дождавшись загрузки всей галереи, пользователь получит сообщение о невозможности такого шага на данном этапе работы.
 +<file javascript>
 +<body>
 + <i id="info">Загрузка изображений...</i>
 + <br />
 +    <img src="../images/frukti.jpg" name="picture" />
 +    <br />
 +    <a href="#" onclick="return nextImage()">Следующее изображение</a>
 +
 +    <script type="text/javascript">
 + var currentImage = 0, count = 0;
 +        var path = new Array("../images/frukti.jpg", "../images/kubiki.jpg", "../images/dino.jpg", "../images/indiana.jpg");
 + var img = new Array ();
 +
 + for (var i=0; i < path.length; i++) {
 + img[i] = new Image (320, 240);
 + img[i].src = path[i];
 + img[i].onload = countImages;
 + }        
 +
 + function countImages () {
 + count++;
 + if (count == path.length)
 + info.innerText = "Готово!";
 + else
 + info.innerText = "Загрузка изображений: " + count + " из " + path.length;
 +
 + }
 +
 +        function nextImage() {
 + if (count != path.length) {
 + alert ("Дождитесь пожалуйста загрузки всех изображений!");
 + return;
 + }
 +            currentImage++;
 +            if (currentImage == path.length) 
 +                currentImage = 0;                
 +            document.images["picture"].src = img[currentImage].src;
 +            return false;
 +        }
 +    </script>
 +</body>
 +</file>
 +====== Пример. Ролловеры. ======
 +Ролловером называют эффект, возникающий при наведении курсора мыши на изображение и при уведении курсора с него (дополнительно, при желании, можно обработать нажатие и отпускание кнопок мыши). Принцип действия эффекта достаточно прост: при возникновении определенного события заменить рисунок на другой, при уведении - восстановить прежний. Это очень похоже не то, что мы делали в одном из предыдущих разделов при создании кнопки. 
 +
 +Ниже перечислены основные шаги и принципы создания ролловеров: 
 +
 +  * Создайте три изображения, каждое из которых соответствует одному из следующих состояний ролловера:
 +      * "coolBtn-normal.gif" - нормальное состояние ролловера,
 +      * "coolBtn-over.gif" - состояние ролловера под курсором мыши,
 +      * "coolBtn-down.gif" - состояние ролловера в момент нажатия кнопки мыши на нем.
 +  * Проведите предзагрузку всех изображений ролловера.
 +  * Обработайте следующие события: 
 +      * onmouseover - смена "coolBtn-normal.gif" на "coolBtn-over.gif",
 +      * onmouseout - смена "coolBtn-over.gif" на "coolBtn-normal.gif",
 +      * onmousedown - смена "coolBtn-over.gif" на "coolBtn-down.gif",
 +      * onmouseup - смена "coolBtn-down.gif" на "coolBtn-over.gif".
 +<file>
 +<body>
 + <img src="../images/coolBtn-normal.gif" name="coolBtn" 
 +      onmouseover="changeImage(1);" 
 +      onmouseout="changeImage(0);"
 +      onmousedown="changeImage(2);"
 +      onmouseup="changeImage(1);" />
 +      
 + <script type="text/javascript">
 + var count = 0;
 + var path = new Array ("../images/coolBtn-normal.gif", 
 +   "../images/coolBtn-over.gif", 
 +   "../images/coolBtn-down.gif");
 + var img = new Array ();
 + for (var i=0; i<path.length; i++) {
 + img[i] = new Image (202, 42);
 + img[i].onload = countImages;
 + img[i].src = path[i];
 + }
 +
 +
 + function countImages () {
 + count++;
 + }
 +
 + function changeImage (index) {
 + if (count == img.length)
 + document.images["coolBtn"].src = img[index].src;
 + }
 +
 + </script>
 +<body>
 +</file>
 +
  

📌 Удобный подбор VPS по параметрам доступен на DIEGfinder.com - официальном инструменте проекта DIEG. Это часть единой экосистемы, созданной для того, чтобы помочь быстро найти подходящий VPS/VDS сервер для любых задач хостинга.

📌 Для тестирования скриптов, установщиков VPN и Python-ботов рекомендуем использовать надежные VPS на короткий срок. Подробнее о быстрой аренде VPS для экспериментов - читайте здесь.

💥 Подпишись в Телеграм 💥 и задай вопрос по сайтам и хостингам бесплатно!

7 Самых Популярных Статей

  1. Как запустить скрипты и веб-приложения на Python
  2. Что такое страны TIER 1,2,3
  3. 7 способов сравнения файлов по содержимому в Windows или Linux
  4. Установка и тестирование веб-панели HestiaCP
  5. Nginx простые примеры конфигурации
  6. top, htop, atop определение загрузки ОС (Load average, LA)
  7. Использование rsync в примерах

7 Самых Популярных Обзоров

  1. Хостинг для Python-скриптов и приложений
  2. ТОП 4 лучших антидетект браузеров (Бесплатные & Платные)
  3. Подборка купонов (промокоды) на хостинг, антидетект браузеры
  4. Обзор THE.Hosting (PQ Hosting): надежный хостинг с профессиональной поддержкой
  5. Хостинг в России
  6. Хостинг в Европе
  7. Обзор браузера Dolphin {anty} для мультиаккаунтинга