Free Script And Source Code For Webmaster ,ASP,HTML,VB,Java, Java Script, Dhtml,xml,ajax,programming: BG Effects: Menu Sliding Image

Home

Menu Sliding Image

(Internet Explorer Only) Provides a navigation menu with a moving image behind the menu!

Download Image Files

Free Script And Source Code For Webmaster ,ASP,HTML,VB,Java, Java Script, Dhtml,xml,ajax,programming: BG Effects: Menu Sliding Image

Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Apple-s). The script is yours!!!

<!-- THREE STEPS TO INSTALL MENU SLIDING IMAGE:

1.  Copy the coding into the HEAD of your HTML document
  2.  Add the onLoad event handler into the BODY tag
  3.  Put the last coding into the BODY of your HTML document  -->

<HEAD>

<style>
BODY
{
}
.clsMenu
{
LEFT: 200px;
POSITION: absolute;
TOP: 300px;
Z-INDEX: 9
}
.clsBlue
{
LEFT: 200px;
POSITION: absolute;
TOP: 300px;
Z-INDEX: 8
}
.clsLink1
{
LEFT: 200px;
POSITION: absolute;
TOP: 300px;
Z-INDEX: 10
}
.clsLink2
{
LEFT: 272px;
POSITION: absolute;
TOP: 300px;
Z-INDEX: 10
}
.clsLink3
{
LEFT: 346px;
POSITION: absolute;
TOP: 300px;
Z-INDEX: 10
}
</style>
<SCRIPT LANGUAGE="JavaScript">

<! >
<! >

<!-- Begin
ie4 = ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4 ))
ns4 = ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) >= 4 ))

var FStart = "";
var BStart = "";

if (ns4) {
layerRef="document.layers";
styleRef="";
} else {
layerRef="document.all";
styleRef=".style";
}

function movFwd(which, xstart, xfinish, ystart, yfinish, step, speed) {  
BStart = "";
if (FStart == "") {
FStart = xstart;
}
if (ie4 || ns4) {
if (xstart < xfinish) { 
eval(layerRef + '["' + which +'"]' + styleRef + '.top = ystart');
eval(layerRef + '["' + which +'"]' + styleRef + '.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 (ie4 || ns4) {
if (xstart > xfinish) { 
eval(layerRef + '["' + which +'"]' + styleRef + '.top = ystart');
eval(layerRef + '["' + which +'"]' + styleRef + '.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);
      }
   }
}
//  End -->
</script>

</HEAD>

<BODY onLoad="movFwd('bl_grad',200,346,300,300,2,15)">

<img src="../img/moving-image-behind-menu/menu.gif" border=0 class="clsMenu">
<img src="../img/moving-image-behind-menu/bl_grad.jpg" border=0 class="clsBlue" id="bl_grad">
<a href="JavaScript:void(0)"><img src="../img/moving-image-behind-menu/blank.gif" height="16" width="55" border=0 class="clsLink1" alt=home></a>
<a href="JavaScript:void(0)"><img src="../img/moving-image-behind-menu/blank.gif" height="16" width="55" border=0 class="clsLink2" alt="Links"></a>
<a href="JavaScript:void(0)"><img src="../img/moving-image-behind-menu/blank.gif" height="16" width="54" border=0 class="clsLink3" alt="Contact"></a>