2015-05-13
492
<HTML>
<HEAD>
<TITLE>Таблицы, цвет фона всей таблицы и отдельной ячейки</TITLE>
<script>
<!-—
function rset(obj)
{ document.all("itab").bgColor="silver"
document.all("itabl").bgColor="gray"
document.all("itab2").bgColor="gray"
document.all("itab3").bgColor="gray"
document.all("itab4").bgColor= "gray"
document.all("itab").border=l
document.all("itab").cellSpacing=10
document.all("itab").cellPadding=20
obj.bor.value=l
obj.cells.value=10
obj.cellp.value=20
}
function gr(obj,m)
{ document.all("itab").bgColor=((obj.elements[5])[m]).text }
function grcol(obj,m)
{ document.all("itabl").bgColor=((obj.elements[5])[m]).text
document.all("itab2").bgColor=((obj.elements[5])[m]).text
document.all("itab3").bgColor=((obj.elements[5])[m]).text
document.all("itab4").bgColor=((obj.elements[5])[m]).text
}
function set(obj)
{ document.all("itab").border=Number(obj.bor.value)
if (obj.cells.value!= "")
document.all("itab").cellSpacing=Number(obj.cells.value)
if (obj.cellp.value!= "")
document.all("itab").cellPadding=Number(obj.cellp.value)
}
//—>
</script>
</HEAD>
<BODY id="doc">
<TABLE border=2 background="fon3.gif">
<TR><TD align=center><В>Изменяемые параметры</В></ТD>
<TD align=center><B>Цвет фона всей таблицы
и отдельной ячейки</В></ТD>
</TR>
|
|
|
<TR>
<TD valign=top>
&пЬзр;<Введите значения параметров
<FORM name="form1">
<input type="text" size=8 name=bor value=l>
Толщина рамки<br>
<input type="text" size=8 name=cells value=10>
Расстояние между ячейками<br>
<input type="text" size=8 name=cellp value=20>
Поля внутри ячейки<br><br>
<CENTER>
<input type="button" value="Просмотр" onclick="set(forml)">
<input type="reset" value="Обновить"
onclick="rset(forml)"><br><br>
</CENTER>
<TABLE border=l align=center background="fonl. jpg">
<TR><TD colspan=2 align=center>Цвет фона</TD></TR>
<TR><TD align=сеnter>таблицы</ТD>
<TD align=center>ячeйки</TD></TR>
<TR>
<TD align=center valign=top>
<select name= col size=l
onChange="gr(forml,forml.col.value)">
<option value=0 >red
<option value=l>green
<option value=2>black
<option value=3>maroon
<option value=4>green
<option value=5>olive
<option value=6>navy
<option value=7>purle
<option value=8>teal
<option value=9>gray
<option value=10 selected>silver
<option value=ll>yellow
<option value=12>blue
<option value=13>fuchsia
<option value=14>white
</select>
</TD>
<TD align=center valign=top>
<select name= colcol size=l
onChange="grcol(forml,forml.colcol.value)">
<option value=0>red
<option value=l>green
<option value=2>black
<option value=3>maroon
<option value=4 selected>green
<option value=5>olive
<option value=6>navy
<option value=7>purle
<option value=8>teal
<option value=9>gray
<option value=10>silver
<option value=ll>yellow
<option value=12>blue
<option value=13>fuchsia
<option value=14>white
</select>
</FORM>
</TD>
</TR>
</TABLE>
</TD>
<TD>
<TABLE id="itab" border=l cellspacing=10 cellpadding=20
bgcolor=silver align=center>
<TR>
<TD id="itab1" bgcolor=gray>
<A href="P1.jpg">
<IMG src="Pl.jpg" border="0" width="150"></A></TD>
<TD id="itab2" bgcolor=gray >
<A href="P2.jpg">
<IMG src="P2.jpg" border="0"width="150"></A></TD>
|
|
|
</TR>
<TR>
<TD id="itab3" bgcolor=gray>
<A href="P3. jpg"><IMG src="P3.jpg"
border="0" width="150"></A>
</TD>
<TD id="itab4" bgcolor=gray>
<A href="P4.jpg"><IMG src="P4.jpg"
border="0" width="150"></A>
</TD></TR></TABLE></TD></TR>
</TABLE>
</BODY>
</HTML>
Выравнивание изображений
Напишем сценарий, который позволяет указывать значения параметров горизонтального выравнивания для трех изображений, расположенных в документе. После выбора значения параметров следует нажать кнопку Просмотр, чтобы просмотреть документ при разных вариантах выравнивания. На рис. 6.9. представлен документ с выбранными параметрами горизонтального размещения
В верхней части документов в таблице расположены рисунки и списки для выбора значений параметров выравнивания. При нажатии кнопки Просмотр изменяется расположение трех изображений относительно друг друга и текстовой строки. Код HTML для данного документа представлен в листинге 6.11.
