Листание картинок и их автоматический просмотр

Вся страница размечается как таблица, состоящая из одного столбца в две ячейки. В первой ячейке размещаются три кнопки управления просмотром картинок "Вперед", "Старт/Стоп", "Назад". Во второй ячейке размещаются картинки, выбранные путем листания. Листание осуществляется кнопками "Вперед" и "Назад". Возможен и другой вариант выбора картинки, когда система сама через некоторый промежуток времени периодически меняет картинки. Для этого следует сначала запустить автоматическую смену картинок, нажав на кнопку "Старт/Стоп", а потом, когда будет показана нужная картинка, остановить автоматическое листание, снова нажав на кнопку "Старт/Стоп". Ниже приведен пример реализации такой компоновки и пример кода самой страницы.

Пример 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>

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