Новые книги
 Только Дэн Кеннеди мог осмелиться написать такое руководство по безжалостному менеджменту – без всякого рассусоливания и высокоученых теорий, только железные рецепты, проверенные на деле. Теперь, когда у вас есть эта книга, уму непостижимо, как вы могли до сих пор без нее обходиться.Она облекает вас правом вернуть себе власть над своим бизнесом, задавать правила, ставить во главу угла прибыль и добиваться настоящих результатов от тех, кто на вас работает. Каждый, кто вооружится установками знаменитого бизнес-гуру и последовательно применит в бизнесе – и в жизни! – описанные на этих страницах методы и техники, очень скоро увидит перемены к лучшему. 3-е издание. |
 Хочешь стать видеоблогером, но не знаешь, с чего начать? У тебя уже есть канал, но ты не понимаешь, что нужно сделать, чтобы он стал популярным, как у Zoella? Твой канал известен и ты хочешь быть как PewDiePie, который зарабатывает на своем блоге более 1 млн долларов в месяц? В этой книге блогер и журналист Зои Гриффин раскрывает все секреты ведения успешного видеоблога. |
Гипертекстовые ссылки и картинки
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>
В данном примере меняются не только картинки, но и стеки гипертекстовых ссылок под ними. Для каждой новой картинки определяются свои собственные гипертекстовые ссылки.