|
↑
Background Effects >>>
Provides a navigation menu with a moving image behind the menu!.
Step 1: Add the below code to the <body> section of your page:
<style>
.clsMenu
{
LEFT:
200px;
POSITION:
absolute;
TOP:
150px;
Z-INDEX:
9
}
.clsBlue
{
LEFT:
200px;
POSITION:
absolute;
TOP:
150px;
Z-INDEX:
8
}.clsLink1{LEFT:
200px;
POSITION:
absolute;
TOP:
150px;
Z-INDEX:
10
}
.clsLink2
{
LEFT:
272px;
POSITION:
absolute;
TOP:
150px;
Z-INDEX:
10
}
.clsLink3
{
LEFT:
346px;
POSITION:
absolute;
TOP:
150px;
Z-INDEX:
10
}
</style>
<SCRIPT
LANGUAGE="JavaScript">
var
FStart =
"";
var
BStart =
"";
function
movFwd(which,
xstart,
xfinish,
ystart,
yfinish,
step,
speed)
{
BStart
=
"";
if
(FStart
==
"")
{
FStart
=
xstart;
}
if
(xstart
<
xfinish)
{
eval(document.getElementById(which).style.top
=
ystart);
eval(document.getElementById(which).style.left
=
xstart);
xstart
=
xstart +
step;
setTimeout("movFwd('"
+
which
+
"', "
+
xstart +
", "
+
xfinish +
", "
+
ystart +
", "
+
yfinish +
", "
+
step +
", "
+
speed +
")",
speed);
}
else
{
setTimeout("movBwd('"
+
which
+
"', "
+
xfinish +
", "
+
FStart+",
"
+
ystart +
", "
+
yfinish +
", "
+
step +
", "
+
speed +
")",
speed);
}
}
function
movBwd(which,
xstart,
xfinish,
ystart,
yfinish,
step,
speed)
{
FStart
=
"";
if
(BStart
==
"")
{
BStart
=
xstart;
}
if
(xstart
>
xfinish)
{
eval(document.getElementById(which).style.top
=
ystart);
eval(document.getElementById(which).style.left
=
xstart);
xstart
=
xstart -
step;
setTimeout("movBwd('"
+
which
+
"', "
+
xstart +
", "
+
xfinish +
", "
+
ystart +
", "
+
yfinish +
", "
+
step +
", "
+
speed +
")",
speed);
}
else
{
setTimeout("movFwd('"
+
which
+
"', "
+
xfinish +
", "
+
BStart +
", "
+
ystart +
", "
+
yfinish +
", "
+
step +
", "
+
speed +
")",
speed);
}
}
function
go()
{
movFwd('bl_grad',200,346,150,150,2,15);
}
window.onload=go;
</script>
<center>
<img
src="menu.gif"
border=0
class="clsMenu">
<img
src="bl_grad.jpg"
border=0
class="clsBlue"
id="bl_grad">
<a
href="JavaScript:void(0)"><img
src="blank.gif"
height="16"
width="55"
border=0
class="clsLink1"
alt=home></a>
<a href="JavaScript:void(0)"><img
src="blank.gif"
height="16"
width="55"
border=0
class="clsLink2"
alt="Links"></a>
<a href="JavaScript:void(0)"><img
src="blank.gif"
height="16"
width="54"
border=0
class="clsLink3"
alt="Contact"></a>
</center>
|
Step 2: The script uses three images as part of its interface. You can create your own, or use the three below (resized for easier download):
(right click images, and select "Save Image As")
Upload them into the same directory as your webpage.
↓
|
