Background Scrolling:
These are two way of background scrolling of the window.
- Horizontal scrolling
- Vertical scrolling
Horizontal Scrolling: To horizontal scrolling we use the following statement:
bgOb.style.backgroundPosition="0"+num;
If you add white space after zero, then background scrolling will be vertical.
For Example:
HTMLPage1.htm:
<html>
<head>
<title>Scrolling background(Horizontal)</title>
</head>
<body background="bk-12d.gif">
<font color=navy>
<h2> Horizontal scrolling Background</h2>
</font>
<script language="JavaScript" type="text/JavaScript">
var speed=25; //This is the speed of scrolling.
var num=0;
var bgOb=eval('document.body')
function scrollBG()
{
num++;
bgOb.style.backgroundPosition="0"+num;
}
setInterval('scrollBG()',speed)
</script>
<img src=image6.jpg height=150 width=200 border=2/>
<p>
<a href=HTMLPage2.htm>Click here to Vertical scrolling</a>
</p>
</body>
</html>
Vertical Scrolling: To vertical scrolling we use the following statement:
bgOb.style.backgroundPosition="0 "+num;
If you remove the white space after zero, then background scrolling will be horizontal.
For Example:
HTMLPage2.htm:
<html>
<head>
<title>Scrolling background (vertical)</title>
</head>
<body background="bk-12d.gif">
<font color=navy>
<h2> Vertical scrolling Background</h2>
</font>
<script language="JavaScript" type="text/JavaScript">
var speed=25; //This is the speed of scrolling.
var num=0;
var bgOb=eval('document.body')
function scrollBG()
{
num++;
bgOb.style.backgroundPosition="0 "+num;
}
setInterval('scrollBG()',speed)
</script>
<img src=Westminstpalace.jpg height=150 width=200 border=2 />
<p>
<a href=HTMLPage1.htm>Click here to horizontal scrolling</a>
</p>
</body>
</html>