- •Обтекание текстом изображения
- •Расположение изображения относительно строки
- •Листинг 4.8. Изображение как часть строки. Параметры выравнивания
- •Листинг 4.9. Расположение текста или изображения внутри ячейки таблицы
- •Листинг 4.10. Выбор фонового изображения для таблицы и задание толщины рамки
- •Листинг 4.11. Фоновое изображение документа, таблицы, ячейки
Лабораторная работа №8 Работа с формой
Уникальные имена
Напишем сценарий, в котором определяется выбранный переключатель при щелчке мышью по определяемой в форме кнопке. Доступ к элементу требуется осуществить, используя уникальные имена (листинг 4.5).
Листинг 4.5. Уникальные имена
<HTML>
<HEAD>
<TITLE>Данные, представленные переключателем. Идентификаторы</TITLE>
<script language="JavaScript">
<!-—//
function vid()
{ var d=document
var k=0;
if (d.all("i1").checked) k=l
else
if (d.all("i2").checked) k=2
else
if (d.all("i3").checked) k=3
else
if (d.all("i4").checked) k=4
d.all("resch").value=k
}
//-—>
</script>
</HEAD>
<BODY>
<FORM name="form1">
Выберите форму витража<hr>
<input type="radio" name="fw" value=l id="i1">пpямoyгoльник<br>
<input type="radio" name="fw" value=2 id="i2">квадрат<br>
<input type="radio" name="fw" value=3 id="i3">треугольник<br>
<input type="radio" name="fw" value=4 id="i4">Kpyr<br>
<hr>
<input type="button" value="Выполнить" onClick="vid()">
<input type="reset" value="Отменить"><hr>
<input type="text" name="res" id="resch">
</FORM>
</BODY>
</HTML>
Выбор параметров обтекания изображения текстом
Напишем сценарий, который предоставляет возможность пользователю задавать значения параметров, определяющих, к какому полю окна (левому или правому) прижимается изображение, и, соответственно, с какой стороны текст его обтекает. Кроме того, требуется предусмотреть возможность задания величины отступов по вертикали и горизонтали, отделяющих текст от изображения.
Если значение параметра align равно Left, то изображение прижимается к левому краю окна просмотра браузера, а текст или другие элементы документа "обтекают" изображение с правой стороны. Текст, размещаемый рядом с изображением, может занимать несколько строк. В примере на рис. 4.3. значение параметра align задано равным Right, поэтому изображение прижато к правому полю окна браузера, а текст обтекает изображение слева. Текст занимает несколько строк. Для того чтобы изображение и текст не "сливались", можно задать параметры, значения которых определяют величину отступа текста от изображения по горизонтали и вертикали. В приведенном примере значения этих величин равны 15 и 10 соответственно. По умолчанию значение параметра align равно Left, а.значение отступов — 0. При нажатии на кнопку Обновить для изображения и текста будут установлены значения параметров, принимаемых по умолчанию.
Пример HTML-кода, который содержит сценарий, обеспечивающий выполнение действий, задаваемых пользователем, приведен в листинге 4.6.
Обтекание текстом изображения
<HTML>
<HEAD>
<TITLE>Изображение и текст. Обтекание</TITLE>
<script>
<!-—
function chpict(obj)
{ var h=obj.hsp.value
var v=obj.vsp.value
document.mypict.hspace=h
document.mypict.vspace=v
if ((obj.elements[0]).checked)
document.mypict.align="Left"
else
document.mypict.align="Right"
)
function rset(obj)
{ document.mypict.align="Left"
document.mypict.hspace=0
document.mypict.vspace=0
obj.hsp.value=0
obj.vsp.value=0
}
//-—>
</script>
</HEAD>
<BODY>
<CENTER>
<Н4>Изображение и текст.
Обтекание и отделение текста от изображения</Н4>
</CENTER>
<FORM name="form1">
Выберите значение параметра выравнивания
и введите значения отступов по горизонтали и вертикали,
нажмите кнопку <В>Просмотр</В>.<br>
<PRE>
<input type="radio" name="alg" checked value=ld>(left) изображение выравнивается по левому краю
<input type="radio" name="alg" value=rd>(right) изображение выравнивается по правому краю
отступ по горизонтали (HSPASE): <input type="text" name="hsp" size=8 value=0>
отступ по вертикали (VSPASE): <input type="text" name="vsp" size=8 value=0>
</PRE>
<input type="button" value= "Просмотр" onclick="chpict(form1)">
<input type="reset" value="Отменить" onclick="rset(form1)"> </FORM>
<TABLE bgcolor="F8F8FF">
<ТR><TD>Иван Иванович Шишкин является одним из основоположников
русского национального пейзажа.
<IMG src=pl.jpg name=mypict align=left border=3 width=310>
В полотне "Рожь" Шишкин создал образ большой эпической силы
и подлинно монументального звучания. Могучая, полная
богатырских сил природа, богатый, привольный край.
Создавая это произведение, Шишкин удачно сочетал в нем
точность характеристики форм природы с широкой, обобщенной
их трактовкой."Картины Шишкина покоряют пониманием
характера родной природы, своей спокойной эпической силой
и широким размахом, которые подстать всему строю
привольного русского пейзажа. (Т. Юрова)
</TD></TR>
</TABLE>
</BODY>
</HTML>
Если изображение рассматривается как элемент строки, то значения параметров выравнивания задают расположение изображения относительно строки текста. Верхняя граница изображения может быть выровнена либо по самому высокому текстовому элементу текущей строки, либо по самому высокому элементу в строке (например, другому изображению). Базовой считается нижняя часть линии текста, которая проводится без учета нижней части некоторых символов. Середину изображения можно выровнять либо по базовой линии, либо по середине текущей строки. Нижнюю часть изображения можно выровнять по базовой линии, либо по нижней границе текущей строки.
Размещение изображения относительно строки
Напишем сценарий, позволяющий по значению параметра выравнивания изображения align определить те действия, которые будут выполняться при заданном значении.
Параметр align в рассматриваемом случае может принимать одно из шести значений, которые задаются переключателем. На рис. 4.4 приведен документ в случае, когда выбрано значение параметра align равное ТЕХТТОР.
При задании пользователем значения параметра выравнивания выбранный элемент получает фокус, и как реакция на это событие, выполняется функция set. В функции set с параметром obj анализируется значение obj .value, и переменной s присваивается соответствующее значение.
|
Рис 4.4. Параметры горизонтального выравнивания |
HTML-код, содержащий сценарий, обеспечивающий описание действий в зависимости от значения параметра, приведен в листинге 4.7.