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

   Вся страница размечается как таблица, состоящая из одной строки в две ячейки. В первой ячейке размещается список выбора альтернатив, во второй ячейке размещаются картинки, выбранные при помощи списка альтернатив. Все элементы списка помечены как гипертекстовые ссылки. У каждой ссылки определено событие onSelect. Для того, чтобы не происходил переход к другой странице, а выполнялась только обработка события, в поле href необходимо определить вызов JavaScript. Ниже приведен пример реализации такой компоновки и пример кода самой страницы.

Образцы смайлов ICQ5

Танцую Ты попал Всё круто Это вам По пиву Браво! Бис!

Теперь приведу фрагменты скрипта:

<SCRIPT>
<!-- Защитили текст скрипта от старых браузеров
function l_image(a) { document.images[1].src=a }
// -->
</SCRIPT>

<TABLE COLS=2 WIDTH="43%">
    <CAPTION><FONT COLOR="#000099" SIZE=+2>Образцы смайлов ICQ5</FONT>
    </CAPTION><TR><TD width="176">

    <UL>
    <LI><A HREF="javascript:l_image('a1.gif')">Танцую</A> </LI>
    <LI><A HREF="javascript:l_image('a2.gif')">Ты попал</LI>
    <LI><A HREF="javascript:l_image('a3.gif')">Всё круто</LI>
    <LI><A HREF="javascript:l_image('a4.gif')">Это вам</LI>
    <LI><A HREF="javascript:l_image('a5.gif')">По пиву</LI>
    <LI><A HREF="javascript:l_image('a6.gif')">Браво! Бис!</LI>
    </UL>
    </TD>
    <TD ALIGN=CENTER VALIGN=CENTER width="99"><IMG SRC="a1.gif" NAME="tool"> </TD>
    </TR>
    </TABLE>

В данном примере при выборе гипертекстовой ссылки происходит вызов функции l_image(), которая изменяет значение атрибута SRC в контейнере IMG. Таким образом, можно организовать просмотр различных товаров в одном единственном графическом окне.

Аналогичным образом можно реализавать выбор картинок из выпадающего списка. в этом случае скрипт будет похожь на предыдущий пример с переходом по выбору, с той лишь разницей, что вместо перехода будет осуществляться смена имени картинки.

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

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

Образцы смайликов

Приведу пример скрипта:

Инициализируем первоначальный список картинок, чтобы в дальнейшем не править все участки кода.

<SCRIPT>
<!-- Защитили текст скрипта от старых браузеров
pictures = new Array()
for(i=0;i<8;i++)
{
   pictures[i] = new Image()
   if(i==0) pictures[i].src = "a1.gif"
   if(i==1) pictures[i].src = "a2.gif"
   if(i==2) pictures[i].src = "a3.gif"
   if(i==3) pictures[i].src = "a4.gif"
   if(i==4) pictures[i].src = "a5.gif"
   if(i==5) pictures[i].src = "a6.gif"
   if(i==6) pictures[i].src = "a7.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;
        scroll_image();
     }
     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="a1.gif" NAME="tool" > </TH> </TR> </TABLE>