Используйте ассоциативный массив, элементами которого бу- дут объекты Image, т.е. фотографии, а ключами – значения атрибу- та VALUE тега <SELECT>. Массив и один элемент создаются так:
var photo = new Array() //элемент массива - объект photo["les"]=new Image(400,550);
//свойство объекта - имя файла с рисунком photo["les"].src="les.jpg";
Функция, которая служит для отображения в окне браузера выбранной фотография, вызывается щелчком мышкой по элементу списка. Это событие называется onchange. В качестве параметра функции передаётся объект SELECT:
<SELECT onchange="prosm(this)"> <option value="les">Лес
Функция, правильно воспринимаемая браузерами Internet Explorer и Mozilla, состоит из трёх строк:
function prosm(list)
{ d=list.options[list.selectedIndex].value //d="les" document.fot.src=photo[d].src;
// fot – имя тега IMG
}
Файлы с фотографиями предоставит преподаватель.
Рисование
В JavaScript нет специальных средств для создания и редакти- рования изображений. Отрезок вертикальной прямой можно изо- бразить с помощью тега <DIV>, задав ширину и высоту контейне- ра равными толщине и длине линии соответственно. Горизонталь- ный отрезок строится с помощью тега <DIV> и вложенного в него тега <HR>.
Идея метода рисования кривой, описанной аналитически, со- стоит в следующем:
38
∙создаётся картинка размером 1 пиксель, залитая чёрным или каким-то другим цветом,
∙эта картинка размножается по заданной траектории.
В примере 4.1 описанными методами строятся четыре пря- мых.
Пример 4.1.
<HTML><HEAD><TITLE>Прямые линии</TITLE> <script>
line(100,100,400,400,3)
line(100,400,400,100,10) function line(x1,y1,x2,y2,n)
{var xstr="" var xstr0=
'<IMG SRC="Tochka.bmp" WIDTH='+n+' HEIGHT='+n+ ' STYLE="position:absolute;"'
var k=(y2-y1)/(x2-x1) x=x1
while (x<=x2) {xstr+=xstr0+'top:'+(k*(x-
x1)+y1)+';left:'+x+'">'
x++
}
document.write(xstr)
}
</script>
</HEAD>
<BODY>
<div style="position:absolute;left:110; font-size:20pt">
Рисование прямых линий</div> <DIV id="dd"
STYLE="position:absolute;top:250;left:100; width:300;height:1;"><hr noshade></div> <div ID="kv" STYLE="position:absolute;top:100;left:250; width:1;HEIGHT:300; background-color:#ff0099"></div> </BODY></HTML>
39
Все прямые пересекаются в одной точке (рис. 3). Горизон-
тальная и вертикальная прямые построены без использования скрипта. Наклонные прямые построены с помощью функции line(x1,y1,x2,y2,n), где x1, y1 − координаты начала отрезка прямой, x2, y2 − координаты конца, n – толщина линии.
Рис. 3. Рисование прямых линий
Задача 4.2. Создайте страницу, на которой строится эллипс с
задаваемыми пользователем размерами большой и малой полуосей
(рис. 4).
40
Рис. 4. Построение эллипса с задаваемыми параметрами
Для построения эллипса удобно использовать его параметри- ческие уравнения:
x = a*cos(t); y = b*sin(t), где: a, b – полуоси, 0 <= t <= 2π
Л а б о р а т о р н а я р а б о т а №5
Движение и перетаскивание
Цель работы − изучить методы создания сценариев для авто- матического движения объектов по заданной траектории и для пе- ретаскивания объектов мышкой.
Движение
Для управления движением объекта используются:
∙метод имя процесса=setInterval(выражение,период) объек-
та window, запускающий процесс циклического выполнения выра- жения (функции);
∙метод clearInterval(имя процесса) объекта window, останав-
ливающий процесс.
41
Методом setInterval(выражение, период) запускается процесс, состоящий в циклическом выполнении заданного в первом пара- метре выражения с периодом, заданным во втором параметре. Процесс останавливается методом clearInterval(имя процесса). В качестве выражения обычно используется функция.
Скрипт, задающий движение фотографии по диагонали экра- на, приведён в примере 5.1.
Пример 5.1.
<HTML>a<HEAD><TITLE>Движение фотографии</TITLE></HEAD> <BODY >
<BUTTON ID="B1" onclick=Start_stop() STYLE="position:absolute; left:300;top:5">
Запустить</button>
<IMG ID="lv" src="LV.jpg" STYLE="position:absolute;top:0;left:20"> </BODY>
<SCRIPT> dx=8; dy=3
st=false //остановить процесс function Start_stop()
{if(st)
{window.clearInterval(proc) //остановиться
st=false
//заменить надпись на кнопке с именем В1 document.all.B1.innerHTML="Запустить"
}
else
//двигаться (запустить процесс с именем proc)
{proc=window.setInterval("move()",100)
st=true
//заменить надпись на кнопке с именем В1 document.all.B1.innerHTML="Стоп"
}
}
function move()
{//ордината верхнего края фотографии //(переведено в тип INTEGER)
42