- •Обтекание текстом изображения
- •Расположение изображения относительно строки
- •Листинг 4.8. Изображение как часть строки. Параметры выравнивания
- •Листинг 4.9. Расположение текста или изображения внутри ячейки таблицы
- •Листинг 4.10. Выбор фонового изображения для таблицы и задание толщины рамки
- •Листинг 4.11. Фоновое изображение документа, таблицы, ячейки
Листинг 4.10. Выбор фонового изображения для таблицы и задание толщины рамки
<HTML>
<HEAD>
<TITLE><Таблицы, графика, фон</TITLE>
<script>
<!-—
function gr(m)
{ document.all("tab").background="fon"+m+".-gif" }
function set(obj)
{ if (obj.bor.value != "")
document.all("tab").border=obj.bor.value}
function rset()
{ document.all("tab").background="fon4.gif"
document.all("tab").border=15
form1.bor.value=15
}
//-->
</script>
</HEAD>
<BODY background="fonl.gif" bgcolor=green>
<H3 align=center>Taблицы, графика, фон</НЗ>
<TABLE border=l align=center>
<TR><TD>
<FORM name="form1">
Толщина рамки <input type="text" size=8 name=bor
value=15 onChange="set(forml)"><br>
Выберите фон для таблицы<br>
<TABLE border=2 align=center>
<TR>
<TD align=center><IMG src="fonl.gif"
width=20 height=50></TD>
<TD align=center><IMG src="fon2.gif"
width=20 height=50> </TD>
<TD align=center><IMG src="fon3.gif"
width=20 height=50></TD>
<TD align=center><IMG src="fon4.gif"
width=20 height=50></TD>
<TD align=center><IMG src="fon5.gif"
width=20 height=50></TD>
<TD align=center><IMG src="fon6.gif"
width=20 height=50></TD>
<TD align=center><IMG src="fon7 .gif"
width=20 height=50></TD>
<TD align=center><IMG src="fon8 .gif"
width=20 height=50></TD>
</TR>
<TR>
<TD align=center><input type="radio" name="op" value=l
onfocus="gr(1) "></TD>
<TD align=center><input type="radio" name="op" value=2
onfocus="gr(2)"></TD>
<TD align=center><input type="radio" name="op" value=3
onfocus="gr (3) "></TD>
<TD align=center><input type="radio" name="op" value=4
onfocus="gr(4)"></TD>
<TD align=center><input type="radio" name="op" value=5
onfocus="gr(5)"></TD>
<TD align=center><input type="radio" name="op" value=6
onfocus="gr(6)"></TD>
<TD align=center><input type="radio" name="op" value=7
onfocus="gr(7)"></TD>
<TD align=center><input type="radio" name="op" value=8
onfocus="gr (8) "></TD>
</TR>
</TABLE>
</FORM><br>
<CENTER>
<input type="reset" value="Обновить " onClick="rset{)">
</TD>
<TD align=center >
<TABLE id="tab" border=15 cellspacing=30 cellpadding=10
height=160 bgcolor=green align=center>
<TR><TD bgcolor=silver><IMG src="bfly.gif" alt="Поздравление"
align=center></TD></TR>
</TABLE>
</TD></TR>
</TABLE>
</BODY>
</HTML>
Фоновое изображение документа, таблицы и ячейки таблицы
Напишем сценарий, который позволяет задать фоновое изображение для документа, таблицы и ячеек таблицы. Сначала пользователь с помощью кнопки-переключателя выбирает часть документа, чье фоновое изображение он хочет изменить, а затем указывает фон.
Как и в предыдущем случае, фоновое изображение задается с помощью кнопок-переключателей. В верхней части документа располагается таблица, состоящая из строки из трех ячеек. В каждую из ячеек помещено одно и то же изображение, размеры которого различны. Далее располагается таблица, в которой задаются параметры с помощью переключателей. Если выбрана ячейка таблицы, то фоновое изображение назначается всем ячейкам. На рис. 4.8. заданы фоновые изображения для всех элементов документа.
Рис. 4.8. Фон для документа, таблицы и ячейки
Доступ к документу, таблице и ячейкам таблицы осуществляется с помощью параметра id. При попадании фокуса на переключатель функции обработки события передается параметр, который используется при формировании имени графического файла, соответствующего выбранной кнопке. Если имена графических файлов не удовлетворяют описанному условию, то сценарий несколько усложнится. Задавать фоновое изображение отдельным частям документа можно в произвольном порядке. На рис. 4.8. приведена таблица, толщина рамки которой равна нулю. Приведем HTML-код документа, изображенного на рисунке (листинг 4.11).