Документация по JavaScript

2.15. Гипертекстовые ссылки и картинки

Гипертекстовые ссылки и картинки - это свойства объекта "документ", который в свою очередь является частью объекта "окно". И гипертекстовые ссылки, и картинки составляют встроенные массивы, к которым можно обращаться по индексу. Рассмотрим несколько примеров программирования массивов гипертекстовых ссылок и картинок.

Просмотр фотографий образцов через список гипертекстовых ссылок

Вся страница размечается как таблица, состоящая из одной строки в две ячейки. В первой ячейке размещается список выбора альтернатив, во второй ячейке размещаются картинки, выбранные при помощи списка альтернатив. Все элементы списка помечены как гипертекстовые ссылки. У каждой ссылки определено событие 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>

В этом примере мы используем те же средства, что использовали и для организации скроллинга. Алгоритм останова и запуска прокрутки тот же, что и при скроллинге окна.

Пример использования client-site imagemap

В данном примере мы хотим показать возможность изменения картинки 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>

В данном примере меняются не только картинки, но и стеки гипертекстовых ссылок под ними. Для каждой новой картинки определяются свои собственные гипертекстовые ссылки.

Содержание