П О Р Т А Л                            
С Е Т Е В Ы Х                          
П Р О Е К Т О В                        
  
Поиск по сайту:
                                                 
Главная

О проекте

Web-мастеру
     HTML & JavaScript
     SSI
     Perl
     PHP
     XML & XSLT
     Unix Shell

MySQL

Безопасность

Хостинг

Другое








Самое читаемое:

Учебник PHP - "Для Чайника".
Просмотров 183566 раз(а).

Иллюстрированный самоучитель по созданию сайтов.
Просмотров 83436 раз(а).

Учебник HTML.
Просмотров 77672 раз(а).

Руководство по PHP5.
Просмотров 48491 раз(а).

Хостинг через призму DNS.
Просмотров 55905 раз(а).

Подборка текстов стандартных документов.
Просмотров 47782 раз(а).

Учебник PHP - Самоучитель
Просмотров 54283 раз(а).

Документация на MySQL (учебник & справочное руководство)
Просмотров 55422 раз(а).

Внешние атаки...
Просмотров 44809 раз(а).

Учебник PHP.
Просмотров 39754 раз(а).

SSI в примерах.
Просмотров 29874 раз(а).



 
 
| Добавить в избранное | Сделать стартовой | Помощь





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>

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

Назад | Содержание



Если Вы не нашли что искали, то рекомендую воспользоваться поиском по сайту: