Практическое введение в программирование на JavaScript

         

Выбор картинки из списка



Пример 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, и по нему определяют, какой именно элемент был отобран.



Содержание раздела