Библиотека Javascript. SE@RCHER

смотреть оглавление

примерразмер кода

<HTML>
<HEAD>
<TITLE>Фото-фон в таблице по двум сторонам</TITLE>
<script type="text/javascript">
<!--
bgImage=new Image()
bgImage.src="00001.jpg"

offset=0
function setSize(){
cellH = document.getElementById("cell").offsetHeight
imgH = bgImage.height
numOfRepeats = Math.ceil(cellH/imgH)
document.getElementById("cell").height = (numOfRepeats+offset) * imgH
}

// add onload="setSize()" to the opening BODY tag

// -->
</script>
</HEAD>
<BODY topmargin="0" leftmargin="0" onload="setSize()">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td background="1997.gif" width="200"></td>
<td id="cell" valign="top"><h1><span>Background Repeat 1</span></h1>
This is one example of how you can have a background image repeated down the page.

<P>This example shows a full image on either side of the page that is repeated downwards.<br>
To create this effect a table is used that has a minimum of three TD cells set out as follows.<br>
The size of the image is 75px x 100px

<td id="cell" valign="top" style="padding:5">Contents</td>

<P>Each end cell has an image background with a fixed width denoted by the images width.<r>
The center TD cell is used for your contents, this cell also determines the overall height.<br>

<P>As you add content to the center cell its height will increase, because the height of the outer cells will also increase this allows the image to repeat.<br>

<P>To ensure you finish with a full image at the end of the page a script is used to do the following:

<ol>
<li>Get the height of the center cell.
<li>Divide the center cell height by the image height.
<li>Convert into the higher whole number.
<li>Increase the center cell height by whole number x image height
</ol>

<P>If an additional repeat of the image is required at the end of the page change the value of variable <i>offset</i> to suit.
<P>
<div class="copy">
<pre>
<script type="text/javascript">
<!--
bgImage=new Image()
bgImage.src="bgrepeat.gif"

// add onload="setSize()" to the opening BODY tag

// -->
</script>
</pre>
<div>
</td>
<td background="1997.gif" width="200"></td>
</tr></table>

</BODY>
</HTML>