Изменение картинки путем выбора предмета из списка.

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