Начало
Bторостепенный Эффект
Меню, Двигающее Изображение
(Internet Explorer Только), Предоставляет навигационному меню движущееся изображение позади меню!
Download Image Files
JavaScript Меню, Двигающее Изображение
<!-- 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 --> <!-- STEP ONE: Paste this code into the HEAD 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> <!-- STEP TWO: Insert the onLoad event handler into your BODY tag --> <BODY onLoad="movFwd('bl_grad',200,346,300,300,2,15)"> <!-- STEP THREE: Copy this code into the BODY of your HTML document --> <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> <!-- Script Size: 3.79 KB -->