| |
Информатика и информационные технологии Электротехника История искусства Каталог графических примеров новые wms на сайте
Гипертекстовые ссылки и картинки - это свойства объекта "документ", который в свою очередь является частью объекта "окно". И гипертекстовые ссылки, и картинки составляют встроенные массивы, к которым можно обращаться по индексу. Рассмотрим несколько примеров программирования массивов гипертекстовых ссылок и картинок.
Вся страница размечается как таблица, состоящая из одной строки в две ячейки. В первой ячейке размещается список выбора альтернатив, во второй ячейке размещаются картинки, выбранные при помощи списка альтернатив. Все элементы списка помечены как гипертекстовые ссылки. У каждой ссылки определено событие onSelect. Для того, чтобы не происходил переход к другой странице, а выполнялась только обработка события, в поле href необходимо определить вызов JavaScript. Ниже приведен пример реализации такой компоновки и пример кода самой страницы.
Пример 2.21. Изменение картинки через гипертекстовую ссылку
<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. Ниже приведен пример реализации такой компоновки и пример кода самой страницы.
Пример 2.22. Выбор картинки из списка
<!-- элементы заголовка --> ... <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, и по нему определяют, какой именно элемент был отобран.
Вся страница размечается как таблица, состоящая из одного столбца в две ячейки. В первой ячейке размещаются три кнопки управления просмотром картинок "Вперед", "Старт/Стоп", "Назад". Во второй ячейке размещаются картинки, выбранные путем листания. Листание осуществляется кнопками "Вперед" и "Назад". Возможен и другой вариант выбора картинки, когда система сама через некоторый промежуток времени периодически меняет картинки. Для этого следует сначала запустить автоматическую смену картинок, нажав на кнопку "Старт/Стоп", а потом, когда будет показана нужная картинка, остановить автоматическое листание, снова нажав на кнопку "Старт/Стоп". Ниже приведен пример реализации такой компоновки и пример кода самой страницы.
Пример 2.23. Листание и прокрутка картинок
<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>В этом примере мы используем те же средства, что использовали и для организации скроллинга. Алгоритм останова и запуска прокрутки тот же, что и при скроллинге окна.
В данном примере мы хотим показать возможность изменения картинки imagemap с одновременным изменением гипертекстовых ссылок, связанных с этой картинкой. Такая возможность существует только в том случае, если все картинки, которые мы хотим использовать в качестве imagemap, имеют одинаковую компоновку. Мы реализуем просмотр вариантов в виде горизонтального меню в верхней строке таблицы и imagemap - в нижней строке таблицы, т.к. наша картинка имеет формат ландшафта.
Пример 2.24. Динамический 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>В данном примере меняются не только картинки, но и стеки гипертекстовых ссылок под ними. Для каждой новой картинки определяются свои собственные гипертекстовые ссылки.