2. Написать сценарий выбора из трех изображений одного, которое вставляется ниже этих трех.
3. Написать сценарий картинки с "эффектом приближения", т.е. увеличения размеров как реакция на попадание курсора мыши в поле рисунка (использовать свойства width и height).
4. Написать сценарий графического горизонтального меню с появляющейся стрелкой над пунктом, у которого находится курсор.
Лабораторная работа №5
Переключатели
Данные удобно представлять с помощью элемента управления "переключатель" (или "радиокнопка") в том случае, когда из нескольких вариантов может быть выбран лишь один.
Пример 1. Вычисление площади фигуры.
Необходимо выбрать форму фигуры и определить ее площадь.
В этой форме шесть элементов. Первый элемент служит для ввода строки текста. Следующие три элемента образуют группу и являются переключателями. Пятый элемент создает кнопку сброса, нажатие которой отменяет все сделанные изменения. Шестой элемент является элементом для ввода строки.
Так как объект forms имеет свойство-массив elements, в котором содержатся ссылки на элементы формы в порядке их перечисления в теге <FORM>, то получить доступ к первому элементу формы можно либо с помощью значения параметра name этого элемента (document.form1.data), либо используя объектную модель JavaScript (document.forms[0].elements[0]). Второй элемент рассматриваемой формы можно получить, если воспользоваться конструкцией document.forms[0].elements[1]. Это элемент-переключатель, определенный в составе группы элементов. В рассматриваемом примере группа элементов состоит из трех переключателей. В одну группу входят элементы с одинаковым значением параметра name. Доступ к следующим элементам группы может быть осуществлен так: document.forms[0].elements[2], document.forms[0].elements [3]. Обязательный параметр value должен иметь уникальное значение для каждого элемента группы. Пользователь может выбрать только один вариант.
Напишем сценарий, в котором в зависимости от длины стороны или радиуса и формы выбранной фигуры вычисляется ее площадь. Для простоты будем считать, что фигура может иметь либо форму квадрата (задается его сторона), либо форму круга (задается радиус), либо форму равностороннего треугольника (задается его сторона).
Площадь рассматриваемых фигур считается по формуле kа^2, где k - коэффициент, зависящий от формы выбранной фигуры; а - задаваемое пользователем значение. Вычисления будут проще, если коэффициент k указать в качестве значения параметра value соответствующего переключателя. Щелчок на элементе "переключатель" соответствует событию click, обработка которого заключается в вызове функции test. Функция имеет единственный параметр, значение параметра - value переключателя, которое служит для вычисления площади фигуры.
HTML-код приведен в листинге 1.
Листинг 1. Вычисление площади выбранной с помощью переключателя фигуры
<HTML>
<HEAD>
<TITLE>Данные из формы типа "переключатель". Событие Click </TITLE>
<script language="JavaScript">
<!--//
function test (k)
{ var a= form1.data.value
if (a !="" )
form1.res.value= k*Math.pow(a,2)
else alert ("Введите значение")
}
//-->
</script>
</HEAD>
<BODY>
<FORM name="form1">
Введите значение
<input type="text" name="data" size=10>
<hr>
Укажите форму <br>
<input type="radio" name="fv" value=1
onClick="test(form1.elements[1].value)">квадрат<br>
<input type="radio" name="fv" value=3.14
onClick="test(form1.elements[2].value)">круг<br>
<input type="radio" name="fv" value=0.42
onClick="test(form1.elements[3].value)">треугольник<hr>
<input type="reset" value="0тменить"><hr>
Площадь: <input type="text" name="res" size=10>
</FORM>
</BODY>
</HTML>
Пример 2. Выбор параметров обтекания изображения текстом
Напишем сценарий, который предоставляет возможность пользователю задавать значения параметров, определяющих, к какому полю окна (левому или правому) прижимается изображение, и, соответственно, с какой стороны текст его обтекает.
Если значение параметра align равно Left, то изображение прижимается к левому краю окна просмотра браузера, а текст или другие элементы документа "обтекают" изображение с правой стороны. Текст, размещаемый рядом с изображением, может занимать несколько строк. По умолчанию значение параметра align равно Left. При нажатии на кнопку Обновить для изображения и текста будут установлены значения параметров, принимаемых по умолчанию.
Пример HTML-кода, который содержит сценарий, обеспечивающий выполнение действий, задаваемых пользователем, приведен в листинге 2.
Листинг 2. Обтекание текстом изображения
<HTML>
<HEAD>
<TITLE>Изображение и текст. Обтекание</TITLE>
<script>
<!--
function chpict(obj)
{
if ((obj.elements[0]).checked)
document.mypict.align="Left"
else
document.mypict.align="Right"
}
function rset(obj)
{document.mypict.align="Left"}
//-->
</script>
</HEAD>
<BODY>
<CENTER>
<H4>Изображение и текст.
Обтекание изображения текстом</H4>
</CENTER>
<FORM name="form1">
Выберите значение параметра выравнивания нажмите кнопку <В>Просмотр</В>.<br>
<PRE>
<input type="radio" name="alg" checked value=ld>(left) изображение выравнивается по левому краю
<input type="radio" name="alg" value=rd>(right) изображение выравнивается по правому краю
</PRE>
<input type="button" value= "Просмотр" onclick="chpict(form1)">
<input type="reset" value="Отменить" onclick="rset(form1)"> </FORM>
<TABLE bgcolor="F8F8FF">
<TR><TD>Иван Иванович Шишкин является одним из основоположников
русского национального пейзажа.
<IMG src=pl.jpg name=mypict align=left border=3 width=310>
В полотне "Рожь" Шишкин создал образ большой эпической силы
и подлинно монументального звучания. Могучая, полная
богатырских сил природа, богатый, привольный край. (Т. Юрова)
</TD></TR>
</TABLE>
</BODY>
</HTML>
Если изображение рассматривается как элемент строки, то значения параметров выравнивания задают расположение изображения относительно строки текста. Верхняя граница изображения может быть выровнена либо по самому высокому текстовому элементу текущей строки, либо по самому высокому элементу в строке (например, другому изображению). Базовой считается нижняя часть линии текста, которая проводится без учета нижней части некоторых символов. Середину изображения можно выровнять либо по базовой линии, либо по середине текущей строки. Нижнюю часть изображения можно выровнять по базовой линии, либо по нижней границе текущей строки.
