Прямо в Локальной Сети, Intranet или Internet !!

Object Images Function.

 
 
Добавьте страницу
“Object Images Function ”
в Избранное !!
Установите локальную версию goodpc.zip

 

Назначение страницы.

Представлены простые и довольно действующие Script и HTML листинги,  и Интернет решения..

Метод Object Images Function.

Для создания управления Script приложениями рисунков, возможно использование  метода: Object Images Function.

<script language=javascript>
function fActiveIMG(par) {// Активация событий
     with (document.images[par]){
        onload=function() {
// Загрузка рисунка
              }
        onmouseover=function() {
// Мышка на рисунке
              }
        onmouseout=function() {
// Мышка ушла с рисунка
              }
        onclick= function() {
// Клик мышкой
              }
     }
//end with
} //end function fActiveIMG

// Вызов функций управления параметр MyImg - id рисунка.
fActiveIMG("MyImg")
</script>

Пример использования - Object Images Function.

Далее приведён практический пример: Мой фотоальбом. В котором реализован метод: Object Images Function.

Типовая задача, решаемая многими WEB программистами: Создать Фотоальбом из 3-4 фотографий.

  • Обозначить, что фотография не загружена.
  • После загрузки фотографии:
    • Обозначить факт загрузки фотографии;
    • При наведении мышкой на фотографию, выводить дополнительную информацию;
    • При клике мышкой открывать новое окно.

Исходный код вы можете найти в Zip архиве, файл album.htm.

<!-- Пример внедрения Object Images Function и HTML код примера.
  WEB Страница:  
  Copyright ©   By: Апарышев Валерий Павлович. All rights reserved.-->
<table border="0" width="100%" style="text-align: center">
    <tr>
        <td><img
id=MyImg1></td>
        <td><img
id=MyImg2></td>
        <td><img
id=MyImg3></td>
    </tr>
</table>

 
<script language=javascript>
function OpNewWin(oPageUrl) {// Открыть новое окно
      MyOpWin=window.open(oPageUrl,"WinFirstName")
      MyOpWin.focus() // Окно на передний план
      window.event.returnValue = false
}
function fActiveIMG(par,ImgUrl,PageUrl,Nadpise) { // Переменные вызова:
     // Рисунок , Адрес рисунка, Адрес перехода, Подпись рисунка.
     // Проверка и установка не достающих переменных вызова.
     if ((ImgUrl== undefined)||(ImgUrl=="")) { // Нет переменных вызова!
          window.alert("Установите правильно параметры вызова!")}
     PageUrl = ((PageUrl == undefined)||(PageUrl =="")) ? null : PageUrl
     Nadpise = ((Nadpise == undefined)||(Nadpise ==null)) ? "" : Nadpise
     with (document.images[par]){
       onload=function() { // Обработчик события - Загрузка рисунка.
 
             style.filter=""// Стиль рисунка Сообщение.
              if ( PageUrl !=null ) { // Есть страница для вызова.
                     style.cursor="hand" // Курсор: Рука.
                     alt=((Nadpise == "") ? "" : "Фотография: "+Nadpise+".\n" )+
                            "Кликни: Вызов фотоальбома."}
              else { // Страницы для вызова нет.
                     style.cursor="" // Курсор: По умолчанию.
                      alt="Фотография"+((Nadpise == "") ? "" : ": "+Nadpise)+"." }
     // Обработчики других событий. После загрузки рисунка!
             onmouseover=function() {// Мышка на рисунке. "Статус" сообщение.
                        window.status="Фотография: "+height + " X " + width +" px, "
                                    + Math.ceil(fileSize/1024) + " Kb."}
             onmouseout=function() {// Мышка ушла с рисунка.
                        window.status=""}
 
             if ( PageUrl !=null ) { // Есть страница для вызова.
                          onclick= function() {// Клик мышкой, Вызов новой страницы.
                                OpNewWin(PageUrl)} // Окно на передний план.
             } // end if
          } // End OnLoad.
     // Вывод рисунка и его атрибутов.
          style.border="0"; style.cursor="wait"// Стиль рисунка.
          style.filter="alpha(Opacity=50), gray()"
          alt="Фотография загружается.. " // Сообщение.
          src=ImgUrl // Определение рисунка.
     } //end with.
} //end function fActiveIMG.

// Вызов функций управления Фотографиями.
fActiveIMG("MyImg1","http://img-fotki.yandex.ru/get/11/goodpc.4/0_57a7_eaaed_M.jpg",
                   "http://fotki.yandex.ru/users/goodpc/view/22439/","В бальном платье")
fActiveIMG("MyImg2","http://img-fotki.yandex.ru/get/10/goodpc.4/0_5792_d4bb44d6_M.jpg" ,
                   "http://fotki.yandex.ru/users/goodpc/view/22418/","Горный Властелин")
// Пример вызова с неполными параметрами!!!
fActiveIMG("MyImg3","http://img-fotki.yandex.ru/get/20/goodpc.5/0_78ed_8bdadb02_M.jpg") //,
                   // "http://fotki.yandex.ru/users/goodpc/view/22444/","Мужчина в доспехах")
</script>

Все фотографии взяты из фотоальбомов автора: На этом сайте и Яндекс Фотках. Исходный код вы можете найти в Zip архиве, файл album.htm. Нетрудно видеть, что при выводе более 3 фотографий, HTML и Script код значительно возрастают. Поэтому целесообразно создавать Таблицу в Script приложении... При этом, если создать Объект свойств Фотоальбомов (для нескольких фотоальбомов), то одна страница может отображать разные фотоальбомы. Этот принцип реализован на странице Мобильное фото. Исходный "листинг" вы можете найти в Zip архиве, файл album_obj.htm.

To be continue...





В Начало Страницы:
Object Images Function”.

G

Copyright © 1997 - 2017. By: Апарышев Валерий. All rights reserved.

×µ

For Not Commercial Use !!

µØ

Пошлите Автору Пожалуйста Письмо !!

+


Яндекс.Метрика