- •Обтекание текстом изображения
- •Расположение изображения относительно строки
- •Листинг 4.8. Изображение как часть строки. Параметры выравнивания
- •Листинг 4.9. Расположение текста или изображения внутри ячейки таблицы
- •Листинг 4.10. Выбор фонового изображения для таблицы и задание толщины рамки
- •Листинг 4.11. Фоновое изображение документа, таблицы, ячейки
Расположение изображения относительно строки
<HTML>
<HEAD>
<TITLE>Расположение изображения относительно строки</TITLE>
<script>
<!-—
var s1="Верхняя граница изображения выравнивается " +
"по самому высокому элементу текущей строки"
var s2="Верхняя граница изображения выравнивается " +
"по самому высокому текстовому элементу текущей строки"
var s3="Выравнивание середины изображения " +
"по базовой линии текущей строки"
var s4="Выравнивание середины изображения " +
"по середине текущей строки"
var s5="Выравнивание нижней границы изображения по базовой линии " +
"текущей строки"
var s6="Выравнивание нижней границы изображения " +
"по нижней границе текущей строки"
var s=""
function set(obj)
{ switch (Number(obj.value))
{
case 0: s=sl; break;
case 1: s=s2; break;
case 2: s=s3; break;
case 3: s=s4; break;
case 4: s=s5; break;
case 5: s=s6; break;
}
obj.form.elements[6].value=s
}
//-->
</script>
</HEAD>
<BODY bgcolor="F8F8FF">
<H3 align=center>Расположение изображения относительно строки</НЗ>
Выберите значение параметра, который Вас интересует
<TABLE border=2>
<TR><TD align=center><H4>Значение параметра выравнивания align</H4>
<TD align=center><H4>Действия при выбранном значении
параметра</Н4></ТR>
<TR><TD>
<FORM name="form1">
<input type="radio" name="ln" value=0 checked
onFocus="set(forml.elements[0])">TOP<br>
<input type="radio" name="ln" value=l
onFocus="set(forml.elements[1])">TEXTTOP<br>
<input type="radio" name="ln" value=2
onFocus="set(forml.elements[2])">MIDDLE<br>
<input type="radio" name="ln" value=3
onFocus="set(forml.elements[3])">ABSMIDDLE<br>
<input type="radio" name="ln" value=4
onFocus="set(forml.elements[4])">BOTTOM или BASELINE<br>
<input type="radio" name="ln" value=5
onFocus="set(forml.elements[5])">ABSBOTTOM<br>
<FORM name="form1">
</TD>
<TD align=center> <textarea name="res" cols=30 rows=4>
Верхняя граница изображения выравнивается по самому высокому
элементу текущей строки </textarea><br></TD></TR>
</TABLE>
<Р>
<input type="reset" value="Обновить">
</BODY>
</HTML>
В следующем примере предлагается написать сценарий, который демонстрирует, как будет изменяться документ при выборе различных параметров выравнивания изображения.
Изображение как часть строки
Напишем сценарий, который позволяет продемонстрировать, как изменяется текущая строка в зависимости от значения параметра выравнивания изображения, рассматриваемого как элемент строки.
Рис. 4.5. Расположение изображения относительно строки
Документ состоит из двух частей. В верхней части перечислены возможные значения параметра выравнивания изображения, рассматриваемого как элемент строки. В нижней части документа располагаются текст и изображение, к которому применяются выбранные действия при нажатии кнопки Просмотр. Рис. 4.5. соответствует ситуации, при которой происходит выравнивание середины изображения по базовой линии текущей строки.
Документ, содержащий HTML-код для решения задачи, представлен в листинге 4.8.