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