|
| |
Назначение страницы.
Представлены простые и довольно действующие
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.
|