nicht angemeldet
Verschiedene Bilder in folgendem Baummenü einbinden
Hallo meine Retter (hoffe ich mal!!)
Ich habe folgendes Problem...ich möchte gerne eine Seite erstellen mit folgendem Baummenü
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta http-equiv="Content-Language" content="en-gb">
<title>Inhalt</title>
<style type="text/css">
a { text-decoration: none;
color: #FFFFFF;
border-style: solid }
.title { position: absolute;
width: 120px;
height: 20px;
left: 50px;
z-index: 10;
font-family: Arial;
font-size: 13px;
color: #FFFFFF;
text-align: Left;
top: 10px;
font-weight: bold }
.submenu { position: absolute;
left: 60px;
width: 110px;
font-family: Arial;
font-size:11px;
visibility: hidden;
color: #FFFFFF;
padding-left: 5px ;}
</style>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var nummenus = 6; // Number of menus
var titlearray = new Array(); // An array for the title objects
var submenuarray = new Array(); // An array for the submenu objects
if (document.layers)
{ // Set visibility for NN and IE
visible = 'show';
hidden = 'hide';
}
else
if (document.all) {
visible = 'visible';
hidden = 'hidden';
}
// Fills the arrays with title and submenu objects
for (var i = 0; i < nummenus; i++) {
titlearray[i] = ('title' + i);
submenuarray[i] = ('submenu' +i);
}
// Changes image when category is clicked
function picopen(n) {
title = ('title' + n);
pic = ('pic' + n);
if (document.layers) {
document.layers[title].document.images[pic].src = "opened.gif";
}
else if (document.all) {
document.all(pic).src = "opened.gif";
}
}
function picclose(n) {
title = ('title' + n);
pic = ('pic' + n);
if (document.layers) {
document.layers[title].document.images[pic].src = "closed.gif";
}
else if (document.all) {
document.all(pic).src = "closed.gif";
}
}
function toggle(n,move) {
menu = ('submenu' + n);
if (document.layers) {
submenu = document.layers[menu];
}
else if (document.all) {
submenu = document.all(menu).style;
}
if (submenu.visibility == visible) {
submenu.visibility = hidden;
picclose(n);
for (var i = (n+1); i < nummenus; i++) {
if (document.layers) {
document.layers[titlearray[i]].top -= move;
document.layers[submenuarray[i]].top -= move;
}
else
if (document.all) {
document.all(titlearray[i]).style.pixelTop -= move;
document.all(submenuarray[i]).style.pixelTop -= move;
}
}
}
else {
submenu.visibility = visible;
picopen(n);
for (var i = (n+1); i < nummenus; i++) {
if (document.layers) {
document.layers[titlearray[i]].top += move;
document.layers[submenuarray[i]].top += move;
}
if (document.all) {
document.all(titlearray[i]).style.pixelTop += move;
document.all(submenuarray[i]).style.pixelTop += move;
}
}
}
lastmenu = submenu;
}
// End -->
</script>
<base target="_self">
<style fprolloverstyle>A:hover {color: #808080; text-decoration: blink}
</style>
</head>
<body link="#FFFFFF"
vlink="#FFFFFF"
alink="#808080"
topmargin="250"
leftmargin="0"
bgcolor="#4A546C" background="hgrundl2.jpg">
<div class="title" id="title0" style="top: 60px; width: 115; height: 20">
<a href="#" onmouseover="javascript: toggle(0,30); return false">
<font color="#FFFFF">
<img name="pic0" src="closed.gif" border="0" width="7" height="7">Spaß</font></a>
</div>
<div class="submenu" id="submenu0" style="top: 80px">
<font color="#DF162B">
<a href="delink.htm#video" target="Hauptframe">Videos</a><br>
<a href="delink.htm#jokes" target="Hauptframe">Jokes</a></font>
</div>
<div class="title" id="title1" style="top: 80px; width: 115; height: 20">
<a href="#" onmouseover="javascript: toggle(1,45); return false">
<font color="#FFFFF"><img name="pic1" src="closed.gif" border="0" width="7" height="7">Service</font></a>
</div>
<div class="submenu" id="submenu1" style="top: 100px">
<font color="#DF162B">
<a href="delink.htm#treiber" target="Hauptframe">Treiber</a><br>
<a href="delink.htm#tutor" target="Hauptframe">Online-Tutor</a><br>
<a href="delink.htm#clock" target="Hauptframe">Overclocking</a></font>
</div>
<div class="title" id="title2" style="top: 100px; width: 115; height: 30">
<a href="#" onmouseover="javascript: toggle(2,30); return false">
<font color="#FFFFF">
<img name="pic2" src="closed.gif" border="0" width="7" height="7">Unterhaltung</font></a>
</div>
<div class="submenu" id="submenu2" style="top: 120px"> <font color="#DF162B">
<a href="delink.htm#filme" target="Hauptframe">Filme</a><br>
<a href="delink.htm#mp3" target="Hauptframe">MP3</a></font>
</div>
<div class="title" id="title3" style="top: 120px; width: 115; height: 20">
<a href="#" onmouseover="javascript: toggle(3,15); return false">
<font color="#FFFFF">
<img name="pic3" src="closed.gif" border="0" width="7" height="7">Projekte</font></a>
</div>
<div class="submenu" id="submenu3" style="top: 140px"> <font color="#DF162B">
<a href="http:\www.studycom.de" target="_blank">studYcom</a></font>
</div>
<div class="title" id="title4" style="top: 140px; width: 115; height: 20">
<a href="#" onmouseover="javascript: toggle(4,60); return false">
<font color="#FFFFF">
<img name="pic4" src="closed.gif" border="0" width="7" height="7">Studium</font></a>
</div>
<div class="submenu" id="submenu4" style="top: 160px"> <font color="#DF162B">
<a href="http://www.nt.fh-koeln.de" target="_blank">Nachrichtentechnik</a><br>
<a href="deprak.htm#ge" target="Hauptframe">GE-Praktika</a><br>
<a href="deprak.htm#ph" target="Hauptframe">PH-Praktika</a><br>
<a href="deprak.htm#dv" target="Hauptframe">DV-Praktika</a></font>
</div>
<div class="title" id="title5" style="top: 160px; width: 100; height: 20">
<a href="#" onmouseover="javascript: toggle(4,15); return false"></a>
<a href="dehist.htm" onmouseover target="Hauptframe" >
<font color="#FFFFF"><img name="pic5" src="blank.gif" border="0" width="7" height="7">History</font></a>
</div>
<div class="submenu" id="submenu5" style="top: 95px"> <a href="#" target="Hauptframe"></a><br>
</div>
<p style="margin-top: -53"> </p>
</body>
</html>
kann man bei www.incorvaia.de angucken.
Aber anstatt der Gifs opened.gif und closed.gif möchte ich für jeden Titel einen eigenen Standard-Gif und auch beim öffnen sollen für jeden Titel unteschiedliche gifs dargestellt werden..
Bitte helft mir
-
Hallo Ingo,
Du wirst jetzt zwar enttäuscht sein, dass ich Dir nicht helfe (hab keinen Nerv den ganzen Quelltext zu durchforsten) aber Cross-Browser tauglichen Source-Code findest Du unter http://www.opencube.com/, dass vereinfacht die Sache und sieht auch besser aus.
Vielleicht schaust Du Dir deren Quelltext an, da hast Du mehr von, als wenn ich hier jetzt umherstammel.gruß
Watte