nicht angemeldet
Navigationsleiste
Hallo,
ich versuche verzweifelt eine Navigationsleiste für meine Homepage zu erstellen. Ich hab nur ein Problem: Ich versuche dynamische Buttons für diese Leiste einzusetzen, so wie bei selfhtml: http://de.selfhtml.org/javascript/beispiele/buttons.htm .Wenn man aber auf der Seite dann über einen normalen Button fährt, erscheint der Highlight-Button nicht über dem normalen Button, sondern darüber. Ich bitte um Hilfe. Die Datei dhtml.js stammt von Selfhtml.
http://de.selfhtml.org/dhtml/beispiele/dhtml_bibliothek.htm
Hier der Quelltext:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
<title>Test</title>
<script type="text/javascript" src="dhtml.js"></script>
<script type="text/javascript">
function Menue () {
if (typeof window.pageYOffset == "number") {
if (NS4) {
getElement("id", "Nav").top = window.pageYOffset + 50;
} else {
getElement("id", "Nav").style.top = window.pageYOffset + 50;
}
} else {
if (typeof document.body.scrollTop == "number")
getElement("id", "Nav").style.top = document.body.scrollTop + 50;
}
if (OP)
getElement("id", "NavLinks").style.pixelTop = NavLinksPos;
if (NS4) {
getElement("id", "Nav").visibility = "show";
} else {
getElement("id", "Nav").style.visibility = "visible";
}
}
function noMenue () {
if (NS4) {
getElement("id", "Nav").visibility = "hide";
} else {
getElement("id", "Nav").style.visibility = "hidden";
}
}
function handleMove (ev) {
if (!ev)
ev = window.event;
var mausposition = ev.pageX ? ev.pageX : ev.clientX;
if (mausposition < 20) {
Menue();
} else {
if (mausposition > 250) {
noMenue();
}
}
}
function Event_init () {
if (document.addEventListener) {
document.addEventListener("mousemove", handleMove, true);
} else {
if (NS4) {
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = handleMove;
} else {
document.body.onmousemove = handleMove;
}
}
if (OP) {
NavLinksPos = 42; // Position des Bereiches NavLinks
getElement("id", "NavLinks").style.pixelTop = NavLinksPos;
}
}
</script>
<script type="text/javascript">
Normal1 = new Image();
Normal1.src = "button1.gif";
Highlight1 = new Image();
Highlight1.src = "button1h.gif";
Normal2 = new Image();
Normal2.src = "button2.gif";
Highlight2 = new Image();
Highlight2.src = "button2h.gif";
Normal3 = new Image();
Normal3.src = "button3.gif";
Highlight3 = new Image();
Highlight3.src = "button3h.gif";
function Bildwechsel (Bildnr, Bildobjekt) {
window.document.images[Bildnr].src = Bildobjekt.src;
}
</script>
<style type="text/css">
body { color:black; background-color:white; background-image:url(navigation_back.gif);
margin:0; padding:20px 50px; font-family:Tahoma,sans-serif; }
#Nav { position:absolute; top:50px; left:0; visibility:hidden; }
#NavLinks { position:absolute; top:42px; left:42px; }
#Nav a:link {color:#000080; font-weight:bold; font-size:13px; text-decoration:none; }
#Nav a:visited { color:#000080; font-weight:bold; font-size:13px; text-decoration:none; }
#Nav a:hover { color:#FFFFFF; background-color:#000080; font-weight:bold;
font-size:13px; text-decoration:none; }
#Nav a:active { color:#000080; font-weight:bold; font-size:13px; text-decoration:none; }
</style>
</head>
<body onload="Event_init()">
<div id="Nav"> <img src="navigation.gif" width="250" height="450"
border="0" alt="">
<div id="NavLinks"> <a href="../../../index.htm"
onmouseover="Bildwechsel(0, Highlight1)"
onmouseout="Bildwechsel(0, Normal1)"><img src="button1.gif" width="130"
height="30" border="0" alt="Home"></a><br>
<a href="../../../helferlein/index.htm"
onmouseover="Bildwechsel(1, Highlight2)"
onmouseout="Bildwechsel(1, Normal2)"><img src="button2.gif" width="130"
height="30" border="0" alt="Helferlein"></a><br>
<a href="../../../layouts/index.htm"
onmouseover="Bildwechsel(2, Highlight3)"
onmouseout="Bildwechsel(2, Normal3)"><img src="button3.gif" width="130"
height="30" border="0" alt="Layouts"></a><br>
</div>
</div>
<br>
</body>
</html>
mfG
TH
-
Wenn man aber auf der Seite dann über einen normalen Button fährt, erscheint der Highlight-Button nicht über dem normalen Button, sondern darüber.
<body onload="Event_init()">
<div id="Nav"> <img src="navigation.gif" width="250" height="450"
border="0" alt="">
<div id="NavLinks"> <a href="../../../index.htm"
onmouseover="Bildwechsel(0, Highlight1)"
onmouseout="Bildwechsel(0, Normal1)"><img src="button1.gif" width="130"
height="30" border="0" alt="Home"></a><br>
<a href="../../../helferlein/index.htm"
onmouseover="Bildwechsel(1, Highlight2)"
onmouseout="Bildwechsel(1, Normal2)"><img src="button2.gif"
......Du hast dem ersten Button die Index-Nummer [0] zugeteilt, obwohl davor noch eine andere Grafik steht ...
Folglich mußt du die Index-Nummern alle um 1 hochzählen, also:
onmouseover="Bildwechsel(1, Highlight1)" onmouseout="Bildwechsel(1, Normal1)"><img src="button1.gif"
usw ...
Gruß Frodo