| НАША ГРУППА |
|
|
|
|
 |
| ОБЩЕНИЕ |
|
|
|
|
|
Крупнейший интернет магазин портативной техники всем зашедшим по этой ссылке скидки.
Фотоальбом с использованием JavaScript.
Попробуем теперь сделать несколько вариантов фотоальбома, используя возможности JavaScript. Сначала сделаем простейший, аналогичный тому что мы делали ранее, когда использовали только средства разметки HTML. Отличие будет только в том, что теперь фотография будет открываться в окне без панели инструментов, строки статуса, адреса страницы, полос прокрутки. Сначала опишем функцию ShowPhoto(), которая будет открывать фотографию в новом окне, без панели инструментов, строки статуса и строки адреса. В качестве параметра данной функции будут передаваться значения: имя файла - Photo, ширина - WidthWin и высота окна - HeightWin. Данная функция будет вызываться используя ссылку:
<a href='javascript:ShowPhoto(Photo,WidthWin,HeightWin)'></a>
Функция будет выглядеть следующим образом:function ShowPhoto(Photo,WidthWin,HeightWin) { // Описываем параметры окна param = "Width=" + WidthWin + "," ; param = param + "Height=" + HeightWin + "," ; param = param + "Top=0," ; param = param + "Left=0," ; param = param + "Toolbar=0," ; param = param + "Status=0," ; param = param + "Menubar=0," ; param = param + "location=0," ; param = param + "Scrollbars=0," ; param = param + "Resizable=1" ; // Открыть новое окно myWin=window.open("", "Photo", param); // открыть объект document для последующей печати myWin.document.open(); // генерировать новый документ myWin.document.write("<html><head><title></title></head>"); myWin.document.write("<body topmargin='0' leftmargin='0'>"); myWin.document.write("<IMG src=" + Photo + "border='0' align='' valign='' hspace='0' vspace='0'>"); myWin.document.write("</body></html>"); // закрыть документ - (но не окно!) myWin.document.close(); }
Поскольку данная функция может вызываться с разных страниц сайта, удобно расположить ее в отдельном внешнем файле, например ShowPhoto.jsc. А в коде нашей страничке мы определим этот файл как источник операторов с помощью атрибута SRC тэга <SCRIPT>:<script Language="JavaScript" src="ShowPhoto.jsc"></script>
Ну и в итоге код нашего фотоальбома будет выглядеть следующим образом:<HTML> <HEAD> <TITLE>Мой фотоальбом</TITLE> <script Language="JavaScript" src="ShowPhoto.jsc"></script> </HEAD> <BODY> <TABLE border="0" width=100%> <CAPTION>Мои любимые фотографии</CAPTION> <tr> <td width=30% align="center"> <a href='javascript:ShowPhoto("PhotoAlbum/11.jpg","542","407")'> <img border="0" align="" valign="" hspace="0" vspace="0" src="PreView/11.jpg"></a> </td> <td width=30% align="center"> <a href='javascript:ShowPhoto("PhotoAlbum/12.jpg","542","407")'> <img border="0" align="" valign="" hspace="0" vspace="0" src="PreView/12.jpg"></a> </td> <td width=30% align="center"> <a href='javascript:ShowPhoto("PhotoAlbum/13.jpg","542","407")'> <img border="0" align="" valign="" hspace="0" vspace="0" src="PreView/13.jpg"></a> </td> </tr> </TABLE> </BODY> </HTML>
Посмотреть как работает наш фотоальбом можно на этой ссылке. Теперь попробуем сделать фотоальбом, в котором фотографии сменяются нажатием клавиш "Следующее" "Предыдущее". Для этого нам необходимо воспользоваться объектом Array - массив. Сначала объявляем новый массив "Photo", записав:Photo = new Array();
После этого заполним массив значениями имен наших файлов с фотографиями. Перечисление элиментов массива в JavaScript начинается с цифры 0:Photo[0] = "PhotoAlbum/11.jpg"; Photo[1] = "PhotoAlbum/12.jpg"; Photo[2] = "PhotoAlbum/13.jpg"; Photo[3] = "PhotoAlbum/21.jpg"; Photo[4] = "PhotoAlbum/22.jpg"; Photo[5] = "PhotoAlbum/23.jpg";
Теперь нам надо описать две функции, которые будут перебирать эти фотографии вперед "next_image()" и назад "prev_image()". Для листания картинок необходимо менять значение переменной n, которая будет оределять порядковый номер фотографии. Увеличивает значение переменной на единицу оператор инкремента (++): n++ Уменьшать значения переменной на единицу будет оператор декремента (--): n-- Число наших фотографий ограниченно, в нашем примере их всего шесть. Поэтому каждый раз необходимо проверять, не вышло ли значение переменной за границу диапазона: 0 - 5. Проверка условия в JavaScript выполняется с помощью оператора IF, имеющего следующую полную форму записи:if ("условие") { // операторы выполняемые в случае если "условие" - "истина" } else { операторы выполняемые если "условие" - "ложь" }
Для нашего случая, если значение переменной n больше 5, то присваеваем переменной n значение 0:if(n>5) n=0;
И если значение переменной n меньше 0, присваеваем переменной n значение 5:if(n<0) n=5;
И после этого демонстрируем картинку, согласно ее положению в массиве. Делать это мы будем используя объект Image. Каждое изображение на web-странице получает порядковый номер: первое изображение получает номер 0, второе - номер 1 и т.д. Таким образом, к первому изображению мы обращаемся записав document.images[0]. Можно присвоить изображению конкретное значение:document.images[0]="PhotoAlbum/11.jpg";
Но нам надо, чтобы изображение выбиралось из элементов массива:document.images[0].src = Photo[n];
Таким образом наши функции смены картинок будут иметь код:function next_image() { n++; if(n>5) n=0; document.images[0].src = Photo[n]; } function prev_image() { n--; if(n<0) n=5; document.images[0].src = Photo[n]; }
Теперь нам остается описать тело самого документа, в котором разместим ссылки или кнопки вызова функция листания фотографий и разместим само изображение. Для позиционирования элементов удобно использовать таблицу. Полный код нашего фотоальбома будет выглядеть следующим образом:<HTML> <HEAD> <meta http-equiv=Content-Type content="text/html; charset=windows-1251"> <TITLE>Листание фотографий в фотоальбоме</TITLE> <SCRIPT> <!-- n=0; Photo = new Array(); Photo[0] = "PhotoAlbum/11.jpg"; Photo[1] = "PhotoAlbum/12.jpg"; Photo[2] = "PhotoAlbum/13.jpg"; Photo[3] = "PhotoAlbum/21.jpg"; Photo[4] = "PhotoAlbum/22.jpg"; Photo[5] = "PhotoAlbum/23.jpg"; function next_image() { n++; if(n>5) n=0; document.images[0].src = Photo[n]; } function prev_image() { n--; if(n<0) n=5; document.images[0].src = Photo[n]; } //--> </SCRIPT> </HEAD topmargin='0' leftmargin='0'> <BODY> <TABLE WIDTH="100%"> <TR> <td ALIGN=CENTER VALIGN=CENTER> <input type=button value="Предыдущее" onClick=prev_image()> <input type=button value="На главную страницу" onClick="self.parent.location='../index.html'"> <input type=button value="Следующее" onClick=next_image()> </td> </tr> <tr> <td ALIGN=CENTER VALIGN=CENTER> <IMG SRC="PhotoAlbum/11.jpg"> </td> </TR> </TABLE> </BODY> </HTML>
| ТРАДИЦИИ КАИ |
|
|
|
| ОСНОВНОЕ |
|
|
|
|
|
|
|
| ОБРАТНАЯ СВЯЗЬ |
|
|
|
|
|