Гипертекстовые ссылки и картинки - это свойства объекта "документ",
который в свою очередь является частью объекта "окно". И гипертекстовые
ссылки, и картинки составляют встроенные массивы, к которым можно
обращаться по индексу. Рассмотрим несколько примеров программирования
массивов гипертекстовых ссылок и картинок.
Просмотр фотографий образцов через список гипертекстовых ссылок
Вся страница размечается как таблица, состоящая из одной строки
в две ячейки. В первой ячейке размещается список выбора альтернатив, во
второй ячейке размещаются картинки, выбранные при помощи списка
альтернатив. Все элементы списка помечены как гипертекстовые ссылки. У
каждой ссылки определено событие onSelect. Для того, чтобы не
происходил переход к другой странице, а выполнялась только обработка
события, в поле href необходимо определить вызов JavaScript. Ниже
приведен пример реализации такой компоновки и пример кода самой
страницы.
Изменение картинки через гипертекстовую ссылку
<HTML>
<HEAD>
<TITLE>HTTPD\HTDOCS\JAVASCR\EXAMPLE1</TITLE>
<SCRIPT>
<!-- Защитили текст скрипта от старых браузеров
function l_image(a)
{
document.images[1].src=a
}
// -->
</SCRIPT>
</HEAD>
<BODY TEXT="#000000" BGCOLOR="#FFFFCC"
LINK="#0000EE" VLINK="#551A8B" ALINK="#FF0000">
<H1>
<FONT COLOR="#000099">Просмотр фотографий
образцов</FONT>
</H1>
<center>
<TABLE COLS=2 WIDTH="100%" >
<CAPTION>
<FONT COLOR="#000099" SIZE=+2>
Образцы бытовой техники</FONT>
</CAPTION>
<TR>
<TD>
<UL>
<LI><A HREF="javascript:l_image('freeze.gif')"
>Холодильник</A> </LI>
<LI><A HREF="javascript:l_image('dust.gif')"
>Пылесосы</LI>
<LI><A HREF="javascript:l_image('toster.gif')"
>Тостер</LI>
<LI><A HREF="javascript:l_image('cook.gif')"
>Варочный стол</LI>
<LI><A HREF="javascript:l_image('oven.gif')"
>Духовка</LI>
<LI><A HREF="javascript:l_image('wash.gif')"
>Стиральная машина</LI>
<LI><A HREF="javascript:l_image('dishwash.gif')"
>Посудомоечная машина</LI>
</UL>
</TD>
<TD ALIGN=CENTER VALIGN=CENTER><
IMG SRC="dust.gif" NAME="tool" > </TD>
</TR>
</TABLE>
</center>
</BODY>
</HTML>
В данном примере при выборе гипертекстовой ссылки происходит
вызов функции l_image(), которая изменяет значение атрибута SRC в
контейнере IMG. Таким образом, можно организовать просмотр различных
товаров в одном единственном графическом окне.
Изменение картинки путем выбора предмета из списка.
Вся страница размечается как таблица, состоящая из одного
столбца в две ячейки. В первой ячейке размещается выпадающее меню
выбора альтернатив, во второй ячейке размещаются картинки, выбранные
при помощи списка альтернатив. При выборе альтернативы из меню
происходит событие onChange, которое вызывает функцию l_image. Ниже
приведен пример реализации такой компоновки и пример кода самой
страницы.
Выбор картинки из списка
<!-- элементы заголовка -->
...
<SCRIPT>
<!-- Защитили текст скрипта от старых браузеров
pictures = new Array()
for(i=0;i<8;i++)
{
pictures[i] = new Image()
if(i==0) pictures[i].src = "freeze.gif"
if(i==1) pictures[i].src = "dust.gif"
if(i==2) pictures[i].src = "toster.gif"
if(i==3) pictures[i].src = "cook.gif"
if(i==4) pictures[i].src = "oven.gif"
if(i==5) pictures[i].src = "wash.gif"
if(i==6) pictures[i].src = "dishwash.gif"
}
function l_image()
{
document.images[1].src = pictures
[document.form1.item.selectedIndex].src
}
// -->
</SCRIPT>
[ На начало страницы ]
Фрагмент HTML-разметки с вызовом функции
изменения картинки:
<center>
<TABLE COLS=2 WIDTH="100%" >
<CAPTION>
<FONT COLOR="#000099" SIZE=+2>
Образцы бытовой техники</FONT>
</CAPTION>
<TR>
<th>
<form name=form1>
<select name=item onChange=l_image()>
<option>Холодильник
<option selected>Пылесос
<option>Тостер
<option>Варочный стол
<option>Духовка
<option>Cтиральная машина
<option>Посудомоечная машина
</select>
</form>
</th>
</tr>
<tr>
<th ALIGN=CENTER VALIGN=CENTER><
IMG SRC="dust.gif" NAME="tool" > </th>
</TR>
</TABLE>
[ <a href=#top>На начало страницы</a> ]
<HR>
</center>
В данном примере картинка выбирается как элемент списка.
При этом происходит событие onChange, и по нему определяют, какой
именно элемент был отобран.
Листание картинок и их автоматический просмотр
Вся страница размечается как таблица, состоящая из одного
столбца в две ячейки. В первой ячейке размещаются три кнопки управления
просмотром картинок "Вперед", "Старт/Стоп", "Назад". Во второй ячейке
размещаются картинки, выбранные путем листания. Листание осуществляется
кнопками "Вперед" и "Назад". Возможен и другой вариант выбора картинки,
когда система сама через некоторый промежуток времени периодически
меняет картинки. Для этого следует сначала запустить автоматическую
смену картинок, нажав на кнопку "Старт/Стоп", а потом, когда будет
показана нужная картинка, остановить автоматическое листание, снова
нажав на кнопку "Старт/Стоп". Ниже приведен пример реализации такой
компоновки и пример кода самой страницы.
Листание и прокрутка картинок
<SCRIPT>
<!-- Защитили текст скрипта от старых браузеров
pictures = new Array()
for(i=0;i<8;i++)
{
pictures[i] = new Image()
if(i==0) pictures[i].src = "freeze.gif"
if(i==1) pictures[i].src = "dust.gif"
if(i==2) pictures[i].src = "toster.gif"
if(i==3) pictures[i].src = "cook.gif"
if(i==4) pictures[i].src = "oven.gif"
if(i==5) pictures[i].src = "wash.gif"
if(i==6) pictures[i].src = "dishwash.gif"
}
n=0;
flag=0;
function next_image()
{
if(flag==0)
{
n++;if(n>6) n=0;
document.images[1].src = pictures[n].src
}
}
function back_image()
{
if(flag==0)
{
n--;if(n<0) n=6;
document.images[1].src = pictures[n].src
}
}
function scroll_image()
{
if(flag==1)
{
n++;if(n>6) n=0;
document.images[1].src = pictures[n].src
}
setTimeout("scroll_image()",1500);
}
function start_stop()
{
if(flag==0)
{
flag=1
}
else
{
flag=0
}
}
// -->
</SCRIPT>
[ На начало страницы ]
<TABLE COLS=2 WIDTH="100%" >
<CAPTION>
<FONT COLOR="#000099" SIZE=+2>
Образцы бытовой техники</FONT>
</CAPTION>
<TR>
<th>
<form name=form1>
<input name=f type=button
value=Вперед onClick=next_image()>
<input name=ss type=button value="Старт/Стоп"
onClick=start_stop()>
<input name=b type=button
value=Назад onClick=back_image()>
</form>
</th>
</tr>
<tr>
<th ALIGN=CENTER VALIGN=CENTER><
IMG SRC="dust.gif" NAME="tool" > </th>
</TR>
</TABLE>
В этом примере мы используем те же средства, что использовали и
для организации скроллинга. Алгоритм останова и запуска прокрутки тот
же, что и при скроллинге окна.
Пример использования client-site imagemap
В данном примере мы хотим показать возможность изменения
картинки imagemap с одновременным изменением гипертекстовых ссылок,
связанных с этой картинкой. Такая возможность существует только в том
случае, если все картинки, которые мы хотим использовать в качестве
imagemap, имеют одинаковую компоновку. Мы реализуем просмотр вариантов
в виде горизонтального меню в верхней строке таблицы и imagemap - в
нижней строке таблицы, т.к. наша картинка имеет формат ландшафта.
Динамический imagemap
<SCRIPT>
<!-- Защитили текст скрипта от старых браузеров
function print_form(a)
{
document.form1.kuku.value = a
}
function set_image(a)
{
if(a == "bosh")
{
document.form1.kuku.value=
"Техника фирмы Bosh."
document.links[5].href =
"javascript:print_form
(\'Refregarator: Bosh-10245
(-24C;Remote Control)\')"
document.links[6].href =
"javascript:print_form
(\'Aero-Filter: Bosh-1212(
Steel Filter)\')"
document.links[7].href =
"javascript:print_form
(\'Oven: Bosh-3432
(Варочный стол + духовка)\')"
document.links[8].href =
"javascript:print_form
(\'Wash mashine:
Bosh-2343(Dry Mode)\')"
document.links[9].href =
"javascript:print_form
(\'Dish wash machine: Bosh-DW-44\')"
document.links[10].href =
"javascript:print_form
(\'Water pipe: Bosh
(Steel + Ceramic)\')"
}
if(a == "Indesit")
{
document.form1.kuku.value=
"Техника фирмы Indesit."
document.links[5].href =
"javascript:print_form
(\'Indesit-105(-18C)\')"
document.links[6].href =
"javascript:print_form
(\'Indesit-101(Steel Filter)\')"
document.links[7].href =
"javascript:print_form
(\'Indesit-3432(Варочный стол + духовка)\')"
document.links[8].href =
"javascript:print_form
(\'Indesit-343(Wash only)\')"
document.links[9].href =
"javascript:print_form
(\'Indesit-DWR-Safe\')"
document.links[10].href =
"javascript:print_form
(\'No in the frame\')"
}
if(a == "candy")
{
document.form1.kuku.value=
"Техника фирмы Candy."
document.links[5].href =
"javascript:print_form
(\'Candy-122(-24C;Hidden model)\')"
document.links[6].href =
"javascript:print_form
(\'Candy-12(Steel Filter + Carbone Filter)\')"
document.links[7].href =
"javascript:print_form
(\'Candy(Варочный стол + духовка)\')"
document.links[8].href =
"javascript:print_form
(\'Candy-343(Dry Mode)\')"
document.links[9].href =
"javascript:print_form
(\'Candy-DWR Elite\')"
document.links[10].href
= "javascript:print_form
(\'Candy(Ceramic)\')"
}
document.images[1].src= a+".gif"
}
// -->
</SCRIPT>
[ На начало страницы ]
<MAP name=kitchen_map>
<area name=freeze shape=rect coords="14,11,88,171"
href="javascript:void(0)">
<area name=aero shape=rect coords="179,12,238,58"
href="javascript:void(0)">
<area name=oven shape=rect coords="179,95,237,172"
href="javascript:void(0)">
<area name=dry shape=rect coords="239,95,297,173"
href="javascript:void(0)">
<area name=wash shape=rect coords="297,96,370,173"
href="javascript:void(0)">
<area name=kran shape=rect coords="90,95,138,172"
href="javascript:void(0)">
</map>
<TABLE border=0>
<CAPTION>
<FONT COLOR="#000099" SIZE=+2>Образцы
бытовой техники</FONT>
</CAPTION>
<TR>
<TH>
<a href="javascript:set_image('bosh')"
>Bosh</a>
</th>
<th>
<a href="javascript:set_image('idezit')"
>Indesit</a>
</th>
<th>
<a href="javascript:set_image('candy')"
>Candy</a>
</th>
</TR>
<TR>
<th colspan=3><IMG SRC="Bosh.gif"
NAME="tool" USEMAP=#kitchen_map></th>
</TR>
<tr><th colspan=3><form
name=form1><input name=kuku size=40
value=Выбери набор техники.></form>
</th></tr>
</TABLE>
В данном примере меняются не только картинки, но и стеки
гипертекстовых ссылок под ними. Для каждой новой картинки определяются
свои собственные гипертекстовые ссылки.
который в свою очередь является частью объекта "окно". И гипертекстовые
ссылки, и картинки составляют встроенные массивы, к которым можно
обращаться по индексу. Рассмотрим несколько примеров программирования
массивов гипертекстовых ссылок и картинок.
Просмотр фотографий образцов через список гипертекстовых ссылок
Вся страница размечается как таблица, состоящая из одной строки
в две ячейки. В первой ячейке размещается список выбора альтернатив, во
второй ячейке размещаются картинки, выбранные при помощи списка
альтернатив. Все элементы списка помечены как гипертекстовые ссылки. У
каждой ссылки определено событие onSelect. Для того, чтобы не
происходил переход к другой странице, а выполнялась только обработка
события, в поле href необходимо определить вызов JavaScript. Ниже
приведен пример реализации такой компоновки и пример кода самой
страницы.
Изменение картинки через гипертекстовую ссылку
<HTML>
<HEAD>
<TITLE>HTTPD\HTDOCS\JAVASCR\EXAMPLE1</TITLE>
<SCRIPT>
<!-- Защитили текст скрипта от старых браузеров
function l_image(a)
{
document.images[1].src=a
}
// -->
</SCRIPT>
</HEAD>
<BODY TEXT="#000000" BGCOLOR="#FFFFCC"
LINK="#0000EE" VLINK="#551A8B" ALINK="#FF0000">
<H1>
<FONT COLOR="#000099">Просмотр фотографий
образцов</FONT>
</H1>
<center>
<TABLE COLS=2 WIDTH="100%" >
<CAPTION>
<FONT COLOR="#000099" SIZE=+2>
Образцы бытовой техники</FONT>
</CAPTION>
<TR>
<TD>
<UL>
<LI><A HREF="javascript:l_image('freeze.gif')"
>Холодильник</A> </LI>
<LI><A HREF="javascript:l_image('dust.gif')"
>Пылесосы</LI>
<LI><A HREF="javascript:l_image('toster.gif')"
>Тостер</LI>
<LI><A HREF="javascript:l_image('cook.gif')"
>Варочный стол</LI>
<LI><A HREF="javascript:l_image('oven.gif')"
>Духовка</LI>
<LI><A HREF="javascript:l_image('wash.gif')"
>Стиральная машина</LI>
<LI><A HREF="javascript:l_image('dishwash.gif')"
>Посудомоечная машина</LI>
</UL>
</TD>
<TD ALIGN=CENTER VALIGN=CENTER><
IMG SRC="dust.gif" NAME="tool" > </TD>
</TR>
</TABLE>
</center>
</BODY>
</HTML>
В данном примере при выборе гипертекстовой ссылки происходит
вызов функции l_image(), которая изменяет значение атрибута SRC в
контейнере IMG. Таким образом, можно организовать просмотр различных
товаров в одном единственном графическом окне.
Изменение картинки путем выбора предмета из списка.
Вся страница размечается как таблица, состоящая из одного
столбца в две ячейки. В первой ячейке размещается выпадающее меню
выбора альтернатив, во второй ячейке размещаются картинки, выбранные
при помощи списка альтернатив. При выборе альтернативы из меню
происходит событие onChange, которое вызывает функцию l_image. Ниже
приведен пример реализации такой компоновки и пример кода самой
страницы.
Выбор картинки из списка
<!-- элементы заголовка -->
...
<SCRIPT>
<!-- Защитили текст скрипта от старых браузеров
pictures = new Array()
for(i=0;i<8;i++)
{
pictures[i] = new Image()
if(i==0) pictures[i].src = "freeze.gif"
if(i==1) pictures[i].src = "dust.gif"
if(i==2) pictures[i].src = "toster.gif"
if(i==3) pictures[i].src = "cook.gif"
if(i==4) pictures[i].src = "oven.gif"
if(i==5) pictures[i].src = "wash.gif"
if(i==6) pictures[i].src = "dishwash.gif"
}
function l_image()
{
document.images[1].src = pictures
[document.form1.item.selectedIndex].src
}
// -->
</SCRIPT>
[ На начало страницы ]
Фрагмент HTML-разметки с вызовом функции
изменения картинки:
<center>
<TABLE COLS=2 WIDTH="100%" >
<CAPTION>
<FONT COLOR="#000099" SIZE=+2>
Образцы бытовой техники</FONT>
</CAPTION>
<TR>
<th>
<form name=form1>
<select name=item onChange=l_image()>
<option>Холодильник
<option selected>Пылесос
<option>Тостер
<option>Варочный стол
<option>Духовка
<option>Cтиральная машина
<option>Посудомоечная машина
</select>
</form>
</th>
</tr>
<tr>
<th ALIGN=CENTER VALIGN=CENTER><
IMG SRC="dust.gif" NAME="tool" > </th>
</TR>
</TABLE>
[ <a href=#top>На начало страницы</a> ]
<HR>
</center>
В данном примере картинка выбирается как элемент списка.
При этом происходит событие onChange, и по нему определяют, какой
именно элемент был отобран.
Листание картинок и их автоматический просмотр
Вся страница размечается как таблица, состоящая из одного
столбца в две ячейки. В первой ячейке размещаются три кнопки управления
просмотром картинок "Вперед", "Старт/Стоп", "Назад". Во второй ячейке
размещаются картинки, выбранные путем листания. Листание осуществляется
кнопками "Вперед" и "Назад". Возможен и другой вариант выбора картинки,
когда система сама через некоторый промежуток времени периодически
меняет картинки. Для этого следует сначала запустить автоматическую
смену картинок, нажав на кнопку "Старт/Стоп", а потом, когда будет
показана нужная картинка, остановить автоматическое листание, снова
нажав на кнопку "Старт/Стоп". Ниже приведен пример реализации такой
компоновки и пример кода самой страницы.
Листание и прокрутка картинок
<SCRIPT>
<!-- Защитили текст скрипта от старых браузеров
pictures = new Array()
for(i=0;i<8;i++)
{
pictures[i] = new Image()
if(i==0) pictures[i].src = "freeze.gif"
if(i==1) pictures[i].src = "dust.gif"
if(i==2) pictures[i].src = "toster.gif"
if(i==3) pictures[i].src = "cook.gif"
if(i==4) pictures[i].src = "oven.gif"
if(i==5) pictures[i].src = "wash.gif"
if(i==6) pictures[i].src = "dishwash.gif"
}
n=0;
flag=0;
function next_image()
{
if(flag==0)
{
n++;if(n>6) n=0;
document.images[1].src = pictures[n].src
}
}
function back_image()
{
if(flag==0)
{
n--;if(n<0) n=6;
document.images[1].src = pictures[n].src
}
}
function scroll_image()
{
if(flag==1)
{
n++;if(n>6) n=0;
document.images[1].src = pictures[n].src
}
setTimeout("scroll_image()",1500);
}
function start_stop()
{
if(flag==0)
{
flag=1
}
else
{
flag=0
}
}
// -->
</SCRIPT>
[ На начало страницы ]
<TABLE COLS=2 WIDTH="100%" >
<CAPTION>
<FONT COLOR="#000099" SIZE=+2>
Образцы бытовой техники</FONT>
</CAPTION>
<TR>
<th>
<form name=form1>
<input name=f type=button
value=Вперед onClick=next_image()>
<input name=ss type=button value="Старт/Стоп"
onClick=start_stop()>
<input name=b type=button
value=Назад onClick=back_image()>
</form>
</th>
</tr>
<tr>
<th ALIGN=CENTER VALIGN=CENTER><
IMG SRC="dust.gif" NAME="tool" > </th>
</TR>
</TABLE>
В этом примере мы используем те же средства, что использовали и
для организации скроллинга. Алгоритм останова и запуска прокрутки тот
же, что и при скроллинге окна.
Пример использования client-site imagemap
В данном примере мы хотим показать возможность изменения
картинки imagemap с одновременным изменением гипертекстовых ссылок,
связанных с этой картинкой. Такая возможность существует только в том
случае, если все картинки, которые мы хотим использовать в качестве
imagemap, имеют одинаковую компоновку. Мы реализуем просмотр вариантов
в виде горизонтального меню в верхней строке таблицы и imagemap - в
нижней строке таблицы, т.к. наша картинка имеет формат ландшафта.
Динамический imagemap
<SCRIPT>
<!-- Защитили текст скрипта от старых браузеров
function print_form(a)
{
document.form1.kuku.value = a
}
function set_image(a)
{
if(a == "bosh")
{
document.form1.kuku.value=
"Техника фирмы Bosh."
document.links[5].href =
"javascript:print_form
(\'Refregarator: Bosh-10245
(-24C;Remote Control)\')"
document.links[6].href =
"javascript:print_form
(\'Aero-Filter: Bosh-1212(
Steel Filter)\')"
document.links[7].href =
"javascript:print_form
(\'Oven: Bosh-3432
(Варочный стол + духовка)\')"
document.links[8].href =
"javascript:print_form
(\'Wash mashine:
Bosh-2343(Dry Mode)\')"
document.links[9].href =
"javascript:print_form
(\'Dish wash machine: Bosh-DW-44\')"
document.links[10].href =
"javascript:print_form
(\'Water pipe: Bosh
(Steel + Ceramic)\')"
}
if(a == "Indesit")
{
document.form1.kuku.value=
"Техника фирмы Indesit."
document.links[5].href =
"javascript:print_form
(\'Indesit-105(-18C)\')"
document.links[6].href =
"javascript:print_form
(\'Indesit-101(Steel Filter)\')"
document.links[7].href =
"javascript:print_form
(\'Indesit-3432(Варочный стол + духовка)\')"
document.links[8].href =
"javascript:print_form
(\'Indesit-343(Wash only)\')"
document.links[9].href =
"javascript:print_form
(\'Indesit-DWR-Safe\')"
document.links[10].href =
"javascript:print_form
(\'No in the frame\')"
}
if(a == "candy")
{
document.form1.kuku.value=
"Техника фирмы Candy."
document.links[5].href =
"javascript:print_form
(\'Candy-122(-24C;Hidden model)\')"
document.links[6].href =
"javascript:print_form
(\'Candy-12(Steel Filter + Carbone Filter)\')"
document.links[7].href =
"javascript:print_form
(\'Candy(Варочный стол + духовка)\')"
document.links[8].href =
"javascript:print_form
(\'Candy-343(Dry Mode)\')"
document.links[9].href =
"javascript:print_form
(\'Candy-DWR Elite\')"
document.links[10].href
= "javascript:print_form
(\'Candy(Ceramic)\')"
}
document.images[1].src= a+".gif"
}
// -->
</SCRIPT>
[ На начало страницы ]
<MAP name=kitchen_map>
<area name=freeze shape=rect coords="14,11,88,171"
href="javascript:void(0)">
<area name=aero shape=rect coords="179,12,238,58"
href="javascript:void(0)">
<area name=oven shape=rect coords="179,95,237,172"
href="javascript:void(0)">
<area name=dry shape=rect coords="239,95,297,173"
href="javascript:void(0)">
<area name=wash shape=rect coords="297,96,370,173"
href="javascript:void(0)">
<area name=kran shape=rect coords="90,95,138,172"
href="javascript:void(0)">
</map>
<TABLE border=0>
<CAPTION>
<FONT COLOR="#000099" SIZE=+2>Образцы
бытовой техники</FONT>
</CAPTION>
<TR>
<TH>
<a href="javascript:set_image('bosh')"
>Bosh</a>
</th>
<th>
<a href="javascript:set_image('idezit')"
>Indesit</a>
</th>
<th>
<a href="javascript:set_image('candy')"
>Candy</a>
</th>
</TR>
<TR>
<th colspan=3><IMG SRC="Bosh.gif"
NAME="tool" USEMAP=#kitchen_map></th>
</TR>
<tr><th colspan=3><form
name=form1><input name=kuku size=40
value=Выбери набор техники.></form>
</th></tr>
</TABLE>
В данном примере меняются не только картинки, но и стеки
гипертекстовых ссылок под ними. Для каждой новой картинки определяются
свои собственные гипертекстовые ссылки.
Комментариев нет:
Отправить комментарий