|
|
change the background image
You can change the background image of the entire document simply by changing that parameter of the BODY tag. We’ll use the document.body.background statement to accomplish this. The background image may be any format supported by the browser. Its location may be stated as absolute or relative.
According to normal functionality, the background image to be displayed will be displayed in its actual dimensions. If the image is larger than the browser window area, the portions of the image that are larger than the window will not be displayed. If the background image is smaller than the browser window the image will be repeated (tiled) to fill the remaining background area.
<html>
<head>
<script type="text/javascript">
function bgChange(bg) {
document.body.background=bg;
}
</script>
</head>
<body>
<table width="300" height="100">
<tr>
<td onmouseover="bgChange('paper.jpg')" background="paper.jpg"></td>
<td onmouseover="bgChange('bluesilk.jpg')" background="bluesilk.jpg"></td>
<td onmouseover="bgChange('bgdesert.jpg')" background="bgdesert.jpg"></td>
</tr>
</table>
</body>
</html>
Also note that this can be used within a table – not just the entire displayed document. Just change the DOM statement given in the JavaScript function in the HEAD of the document. A table has the option of displaying an image as the background, so it might be a good idea to look into this. Use the getElementById.style.background statement in this case. Give the location of the image as needed and apply with an onLoad event handler to display the background image when the page is loaded or an onMouseOver event to display the background image when the user selects that.
|
|
