- •Обтекание текстом изображения
- •Расположение изображения относительно строки
- •Листинг 4.8. Изображение как часть строки. Параметры выравнивания
- •Листинг 4.9. Расположение текста или изображения внутри ячейки таблицы
- •Листинг 4.10. Выбор фонового изображения для таблицы и задание толщины рамки
- •Листинг 4.11. Фоновое изображение документа, таблицы, ячейки
Листинг 4.8. Изображение как часть строки. Параметры выравнивания
<HTML>
<HEAD>
<TITLE>Расположение изображения относительно строки</TITLE>
<script>
<!-—
function set(obj)
{ if(obj.elements[0].checked) document.mypict.align="TOP"
else
if(obj.elements[1].checked) document.mypict.align="TEXTTOP"
else
if(obj.elements[2].checked) document.mypict.align="MIDDLE"
else
if(obj.elements[3].checked)
document.mypict.align="ABSMIDDLE"
else
if(obj.elements[4].checked)
document.mypict.align="BOTTOM"
else
if(obj.elements[5].checked)
document.mypict.align= "ABSBOTTOM" }
//-->
</script>
</HEAD>
<BODY bgcolor="F8F8FF">
<CENTER>
<H3 align=center>Расположение изображения относительно строки</Н3>
Выберите значение параметра и нажмите кнопку <В>Просмотр</В>.
<TABLE border=2>
<TR>
<ТD><Н4>Значения параметра выравнивания align</H4>
</TR>
<TR><TD>
<FORM name="form1">
<input type="radio" name="im" value="top" checked>TOP<br>
<input type="radio" name="im" value="texttop">TEXTTOP<br>
<input type="radio" name="im" value="middle">MIDDLE<br>
<input type="radio" name="im" value="absmiddle">ABSMIDDLE<br>
<input type="radio".name="im" value="botton">
BOTTOM или BASELINE <br>
<input type="radio" name="im" value="absbotton">ABSBOTTOM<br>
</FORM>
</TD></TR>
</TABLE><br>
<input type="button" value= "Просмотр" onclick="set(form1)">
<input type="reset" value="Обновить"><P>
</CENTER>
<TABLE border=2 bgcolor="#FFDCDC">
<ТR><TD>Параметры выравнивания <IMG src="p511.jpg" name="mypict"
align=TOP>
задают расположение изображения относительно строки текста.
В этом случае изображение является обычным элементом строки.
</TD></TR></TABLE>
</BODY>
</HTML>
Во многих случаях данные удобно представить в виде таблицы. Поскольку таблица содержит ячейки, то для каждой из ячеек можно определить, как разместить в ней данные. Горизонтальное выравнивание позволяет содержимое ячейки расположить по центру, левому или правому краю. Кроме того, текст или графику внутри ячейки можно разместить, определив параметры вертикального выравнивания.
Расположение текста и изображения в ячейке таблицы
Напишем сценарий, который позволяет продемонстрировать, как изменяется содержимое ячейки таблицы в зависимости от значений параметров горизонтального и вертикального выравнивания.
В документе слева находится список параметров, которые пользователь выбирает для горизонтального и вертикального выравнивания. В правой части в ячейке таблицы хранится изображение, положение которого будет меняться в зависимости от выбранных переключателей после нажатия кнопки Просмотр. (рис. 4.6.)
Рис. 4.6. Расположение изображения внутри ячейки
После нажатия кнопки Просмотр выполняется функция, анализирующая, какие параметры выбраны, и присваивает определенные значения атрибутам выравнивания содержимого ячейки. В правой части документа изображение занимает определенное параметрами выравнивания место в ячейке таблицы. Доступ к ячейке таблицы осуществляется по значению параметра id. При нажатии кнопки Обновить изображение требуется вернуть на место. По умолчанию горизонтальное выравнивание предполагает расположение содержимого по левому краю, вертикальное выравнивание — по верхней границе. HTML-код, содержащий сценарии, представлен в листинге 4.9.