nicht angemeldet
Hallo,
ich möchte eine Hta/html seite erstellen die ein Navigationsmenü enthält und ich bei jedem Klick auf einen Menüpunkt ein anderes Bild angezeigt bekomme. Das Menü hab ich soweit mir zusammenkopiert.
Allerdings versteh ich nicht wie ich den Code so ändern kann, dass mir jedes mal also bei jedem Menüpunkt ein anderes Bild angezeigt wird.
Was man vllt noch dazu sagen müsste, das ganze soll nur für private Zwecke sein und ich kenn mich mit html nicht sonderlich gut aus. Den Quelltext hier habe ich mir zusammenkopiert.
Ich hoffe jemand kann mir die nötigen Denkanstöße bzw. Lösung liefern.
Würd mich freuen
MfG into
menue.hta:
<html>
<head>
<!-- jQuery einbinden -->
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<HTA:APPLICATION
APPLICATIONNAME = "Baummenü"
SINGLEINSTANCE = "yes"
SCROLL = "yes"
MAXIMIZEBUTTON="yes"
MINIMAZEBUTTON="yes"
NAVIGABLE="yes"
SELECTION="no"
CONTEXTMENU="no"
BORDER="thin"
INNERBORDER="yes"
</>
<script language="JavaScript">
<!--
$(function() {
/* Alle Span mit der Klasse .ausklappen verstecken*/
$('span.ausklappen').next().hide();
/* <span>+ </span> vor dem Ausgewälten Element einfügen*/
$("span.ausklappen").before("<span>+ </span>");
/* Den Mauszeiger ändern*/
$("span.ausklappen").css("cursor", "pointer");
$("span.ausklappen").click(function() {
/\*Ebene nach unten, oder oben gleiten lassen \*/
$(this).next().slideToggle("slow");
/\* Wenn das vorheirge elment + enthält, dann durch - ersetzen und umgekehrt\*/
if ($(this).prev(this).text() == "+ " )
$(this).prev(this).replaceWith("<span>- </span>");
else if ($(this).prev(this).text() == "- " )
$(this).prev(this).replaceWith("<span>+ </span>");
});
});
//-->
</script>
<STYLE type="text/css">
#links { float:left; width:20em; border:1px; margin-top:10px; margin-right:20px; }
#rechts { border:1px; margin-top:30px; width:50%;}
#baum
{
margin:0 0 0 0;
list-style-type:none;
padding:0 0 1em 0;
width:25em;
font: .9em/1.5em Arial, Tahoma, Verdana, sans-serif;
}
#baum li
{
margin:0.5em 0.5em 0.5em 0.5em;
list-style-type:none;
background:#F0F0F0;
padding:0.1em;
}
#baum li li
{
margin:0.5em 0.5em 0.5em 1.5em;
background:#FFFFFF;
}
#baum li li li
{
background:#F0F0F0;
}
#baum a
{
text-decoration:none;
}
</STYLE>
</head>
<body>
<div id = "links">
<!-- Start des Baumes -->
<ul id="baum">
<!-- Ebene 1 -->
<!-- Diese Ebene kann ausgeklappt werden -->
<li><span class="ausklappen">Ebene 1 Punkt 1</span>
<ul>
<!-- Ebene 2-->
<li><span class="ausklappen">Ebene 2 Punkt 1</span>
<ul>
<!-- Ebene 3 -->
<li><a href="#">Ebene 3 Punkt 1</a>
</li>
<li><a href="#">Ebene 3 Punkt 2</a></li>
<li><a href="#">Ebene 3 Punkt 3</a></li>
</ul>
</li>
<li><a href="#">Ebene 2 Punkt 3</a></li>
<li><a href="#">Ebene 2 Punkt 4</a></li>
</ul>
</li>
<li><span class="ausklappen">Ebene 1 Punkt 2</span>
<ul>
<li><a href="#">Ebene 2 Punkt 1</a></li>
<li><a href="#">Ebene 2 Punkt 2</a></li>
<li><a href="#">Ebene 2 Punkt 3</a></li>
</ul>
</li>
<!-- Diese Ebenen können nicht ausgeklappt werden -->
<li><a href="#">Ebene 1 Punkt 3</a></li>
<li><a href="#">Ebene 1 Punkt 4</a></li>
</ul>
</div>
<div id = "rechts">
<p> <img src="sonnenuntergang.jpg" width="700" height="500" alt="sonnenuntergang"></p>
</div>
</body>
</html>