Menu til hjemmeside
Jeg har fundet en menu til min hjemmeside.jeg har koden. Og vil sætte det ind i frontpage men duer ikke. Den viser ikke knapperne. hvor det bare er en rød X
Og baggrunden kommer med altså den baggrund der var med til menuen den skal helst ikke med. her er koden så kan det godt være i kan se en fejl i det.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gliding Rollovers</title>
<script type="text/javascript">
// made by Eddie Traversa copyright 2004
// http://www.dhtmlnirvana.com/
// free to use as long as this copyright notice stays intact.
var timer1=null;
// needed for xhtml dtds
px = (document.getElementById) ? "px" : "";
// use the offset variable to refine the pointers end position
// setting it to 0 sees the pointer end at left position of element
// so if we need to adjust it so that the pointer centers over text etc..
// then this is the variable to use;
var offset = 15;
// Controls the speed of the animation
var timerspeed = 25;
// controls the number of step from point a to point b. higher numbers see a decrease in speed
var steps = 20;
// controls the deceleration
// dont recommend changing this var as this number seems to work well across all browsers
var decrease = 0.09;
// gets the current position of the link;
function getPosition(id) {
if (document.getElementById) {
endPos = document.getElementById(id).offsetLeft;
}
else if (document.layers) {
endPos = document.layers[id].left;
}
}
// shoves the pointer around the screen based on what current link is activated
// to make a vertical one just change offsetLeft to offsetTop
// and change any references to .left to .top
// see my home page for an example
// http://www.dhtmlnirvana.com/
function glideMenu(obj) {
if (document.getElementById) {
el = document.getElementById(obj).style ;
}
if (document.layers) {
el = document.layers[obj] ;
}
el.xpos = parseInt(el.left);
if (el.xpos < endPos) {
clearTimeout(timer1);
}
else if (el.xpos >= endPos) {
clearTimeout(timer1);
}
distance = endPos - el.xpos + offset;
steps = distance*decrease;
el.xpos += steps;
el.left = el.xpos+px ;
timer1= setTimeout("glideMenu('" + obj + "')",timerspeed);
}
// refresh the page on a window resize so ns4 doesnt screw the layers up
window.onresize = function () {
history.go(0);
}
</script>
<style type="text/css">
<!--
body {
background-color: #5D5765;
}
img {
border: 0px;
}
.maintext {
font-family: "Courier New", Courier, mono;
font-size: 18px;
color: #FFCC99;
}
a:link {
font-family: "Courier New", Courier, mono;
font-size: 14px;
color: #FFFFFF;
}
a:visited {
font-family: "Courier New", Courier, mono;
font-size: 14px;
color: #FFCC66;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<!-- we need to wrap links in a div tag for ns4 & ns7, moz -->
<div id="link1" style="position:absolute; top:44px; left:162px; z-index: 3;"> <a href="#" onmouseover="getPosition('link1');glideMenu('pointer')"> <img src="button1.gif" width="95" height="25" border="0" /></a> </div>
<div id="link2" style="position:absolute; top:44px; left:256px; z-index: 3;"> <a href="#" onmouseover="getPosition('link2');glideMenu('pointer')"><img src="button2.gif" width="95" height="25" border="0" /></a> </div>
<div id="link3" style="position:absolute; top:44px; left:351px; z-index: 3;"><a href="#" onmouseover="getPosition('link3');glideMenu('pointer')"> <img src="button3.gif" width="95" height="25" border="0" /> </a></div>
<div id="link4" style="position:absolute; top:44px; left:446px; z-index: 3;"><a href="#" onmouseover="getPosition('link4');glideMenu('pointer')"> <img src="button4.gif" width="95" height="25" border="0" /> </a></div>
<div id="link5" style="position:absolute; top:44px; left:541px; z-index: 3;"><a href="#" onmouseover="getPosition('link5');glideMenu('pointer')"> <img src="button4.gif" width="95" height="25" border="0" /> </a></div>
<div id="pointer" style="position:absolute; left:164px; top:27px; width:130px; height:30px; z-index: 2;">
<img src="pointer_animated.gif" alt="" width="81" height="61" border="0" />
</div>
<div id="barLYR" style="position:absolute; width:1200px; height:60px; z-index:1; background-image: url(bar.gif); layer-background-image: url(bar.gif); border: 1px none #000000; left: 0px; top: 25px;"></div>
<div id="Layer1" style="position:absolute; width:439px; height:72px; z-index:4; left: 262px; top: 129px;" class="maintext">DHTML
Nirvana Gliding Rollovers Example </div>
</body>
</html>
