nicht angemeldet
Navigationsleiste
Hallo,
ich bin gerade dabei, eine Homepage für meinen Sportverein zu gestalten, zur Zeit bin ich bei der Navigationsleiste.
Hier erstmal 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>SSV Kirchenpingarten</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 + 40;
} else {
getElement("id", "Nav").style.top = window.pageYOffset + 40;
}
} else {
if (typeof document.body.scrollTop == "number")
getElement("id", "Nav").style.top = document.body.scrollTop + 40;
}
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 > 190) {
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 = 20;
getElement("id", "NavLinks").style.pixelTop = NavLinksPos;
}
}
</script>
<script type="text/javascript">
Normal2 = new Image();
Normal2.src = "../bilder/navigation/buttonakt.gif";
Highlight2 = new Image();
Highlight2.src = "../bilder/navigation/buttonakth.gif";
Normal3 = new Image();
Normal3.src = "../bilder/navigation/buttonfuss.gif";
Highlight3 = new Image();
Highlight3.src = "../bilder/navigation/buttonfussh.gif";
Normal4 = new Image();
Normal4.src = "../bilder/navigation/buttontisch.gif";
Highlight4 = new Image();
Highlight4.src = "../bilder/navigation/buttontischh.gif";
Normal5 = new Image();
Normal5.src = "../bilder/navigation/buttonsport.gif";
Highlight5 = new Image();
Highlight5.src = "../bilder/navigation/buttonsporth.gif";
Normal6 = new Image();
Normal6.src = "../bilder/navigation/buttonbilder.gif";
Highlight6 = new Image();
Highlight6.src = "../bilder/navigation/buttonbilderh.gif";
Normal7 = new Image();
Normal7.src = "../bilder/navigation/buttonforum.gif";
Highlight7 = new Image();
Highlight7.src = "../bilder/navigation/buttonforumh.gif";
Normal8 = new Image();
Normal8.src = "../bilder/navigation/buttongäste.gif";
Highlight8 = new Image();
Highlight8.src = "../bilder/navigation/buttongästeh.gif";
Normal9 = new Image();
Normal9.src = "../bilder/navigation/buttonverein.gif";
Highlight9 = new Image();
Highlight9.src = "../bilder/navigation/buttonvereinh.gif";
Normal10 = new Image();
Normal10.src = "../bilder/navigation/buttonlinks.gif";
Highlight10 = new Image();
Highlight10.src = "../bilder/navigation/buttonlinksh.gif";
Normal11 = new Image();
Normal11.src = "../bilder/navigation/buttonimp.gif";
Highlight11 = new Image();
Highlight11.src = "../bilder/navigation/buttonimph.gif";
function Bildwechsel (Bildnr, Bildobjekt) {
window.document.images[Bildnr].src = Bildobjekt.src;
}
</script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body onload="Event_init()">
<div id="Nav">
<img src="../bilder/navigation/navigation.gif" width="150" height="529" border="0" alt="">
<div id="NavLinks"> <a href="Aktuell.htm"
onmouseover="Bildwechsel(1, Highlight2)"
onmouseout="Bildwechsel(1, Normal2)"><img border="0"
height="22" width="110" src="../bilder/navigation/buttonakt.gif" ></a><br>
<a href="../../../helferlein/index.htm"
onmouseover="Bildwechsel(2, Highlight3)"
onmouseout="Bildwechsel(2, Normal3)"><img border="0"
height="22" width="110" src="../bilder/navigation/buttonfuss.gif"></a><br>
<a href="../../../layouts/index.htm"
onmouseover="Bildwechsel(3, Highlight4)"
onmouseout="Bildwechsel(3, Normal4)"><img border="0"
height="22" width="110" src="../bilder/navigation/buttontisch.gif"></a><br>
<a href="../../../layouts/index.htm"
onmouseover="Bildwechsel(4, Highlight5)"
onmouseout="Bildwechsel(4, Normal5)"><img border="0"
height="22" width="110" src="../bilder/navigation/buttonsport.gif"></a><br>
<a href="../../../layouts/index.htm"
onmouseover="Bildwechsel(5, Highlight6)"
onmouseout="Bildwechsel(5, Normal6)"><img border="0"
height="22" width="110" src="../bilder/navigation/buttonbilder.gif"></a><br>
<a href="Bilder.htm"
onmouseover="Bildwechsel(6, Highlight7)"
onmouseout="Bildwechsel(6, Normal7)"><img border="0"
height="22" width="110" src="../bilder/navigation/buttonforum.gif"></a><br>
<a href="Bilder.htm"
onmouseover="Bildwechsel(7, Highlight8)"
onmouseout="Bildwechsel(7, Normal8)"><img border="0"
height="22" width="110" src="../bilder/navigation/buttongäste.gif"></a><br>
<a href="Bilder.htm"
onmouseover="Bildwechsel(8, Highlight9)"
onmouseout="Bildwechsel(8, Normal9)"><img border="0"
height="22" width="110" src="../bilder/navigation/buttonverein.gif"></a><br>
<a href="Bilder.htm"
onmouseover="Bildwechsel(9, Highlight10)"
onmouseout="Bildwechsel(9, Normal10)"><img border="0"
height="22" width="110" src="../bilder/navigation/buttonlinks.gif"></a><br>
<a href="Bilder.htm"
onmouseover="Bildwechsel(10, Highlight11)"
onmouseout="Bildwechsel(10, Normal11)"><img border="0"
height="22" width="110" src="../bilder/navigation/buttonimp.gif"></a><br>
</div>
</div>
</body>
</html>
So, ich möchte nun folgendes hinzufügen:
Wenn man mit der Maus über einen Button der Navigationsleiste, z.B. buttonsport.gif fährt, sollen sich zwischen diesem Button und dem Button darunter weitere Buttons einschieben.
Ich weiß nicht, ob sich nun jeder vorstellen kann, wie die Leiste mal aussehen soll. Bitte nachfragen, wenn Unklarheiten bestehen.
Ich versuche dieses Problem nun schon seit 2 Tagen zu lösen, bekomms aber einfach nicht gebacken.
mfG
TH
-
Hi,
den umständlichen Javascript-Bildwechsel kannst Du Dir sparen und über CSS auch Besuchern bieten, die Javascript deaktiviert haben.
Dein Menü könntest Du sinnvoller in eine Liste setzen, die Du dann in dieser Art formatieren kannst. Dynamik bekommst Du dann wie in diesem Beispiel rein.freundliche Grüße
Ingo