ingo: Verschiedene Bilder in folgendem Baummenü einbinden

Beitrag lesen

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