✔ Wechselnde Grafik (Aufklappbare Menüs - Pfeil nach oben oder unten)

dwex

dwex

Erfahrenes Mitglied
Hallo Leute,

stehe wieder mal vor einem Problem und hoffe auf Hilfe von euch!

Also es geht darum, dass ich gerne Menüs machen möchte welche aufklappbar sein sollen.
Jetzt habe ich es mir in den Kopf gesetzt, dass ich neben dem Textlink auch noch eine Grafik haben möchte - das wäre ja alles kein Problem.
Jedoch möchte ich die Grafik dann je nachdem ob das Menü geöffnet oder geschlossen ist verändern (Pfeil nach oben wenn das Menü offen ist und Pfeil nach unten wenn das Menü geschlossen ist).

Hier mal mein Testquelltext (ist nur zum testen geschrieben um die Funktionsweise des aufklappbaren Menüs zu verstehen). Also Jeweils im DIV-Layer "box1" soll die Grafik stehen und geändert werden.
HTML: 
<head>

<script type="text/javascript">
<!--
function outline(id)
{
 if(document.getElementById(id).style.display == 'none')
 {
  document.getElementById(id).style.display = 'block';
 }
 else
 {
  document.getElementById(id).style.display = 'none';
 }
}
//-->
</script>


	<style type="text/css">
	<!--

		body {
				font: 11px Verdana, Arial, Helvetica, sans-serif;
				background-color: #B2B2B2;
		}

		#box1 {
				font: italic 11px Verdana, Arial, Helvetica, sans-serif;
				background-color: red;
				/*float: left;*/
				width: 100px;
				/*text-align: right;*/
		}

		#box2 {
				font: bold 11px Verdana, Arial, Helvetica, sans-serif;
				background-color: green;
				/*float: left;*/
				width: 100px;
		}
		
		a {
				text-decoration:none;
		}

	-->
	</style>


</head>


<body>


<div id="box1">&nbsp;<a href="#" onclick="outline('verwaltung'); return false;">test</a></div>
    <span id="verwaltung" style="display:none">
        <div id="box2">&nbsp;Artikel 1</div>
        <div id="box2">&nbsp;Artikel 3</div>
        <div id="box2">&nbsp;Artikel 2</div>
    </span>
    
<div>&nbsp;</div>

<div id="box1">&nbsp;<a href="#" onclick="outline('artikel'); return false;">test 2</a></div>
    <span id="artikel" style="display:none">
    	<div id="box2">&nbsp;Artikel 1</div>
    </span>


</body>
Ich hoffe, dass mir jemand weiterhelfen kann und möchte mich für euere Mühen im voraus recht herzlich bedanken.
 
Hi,

am einfachsten ist es vielleicht, wenn Du die Grafiken als Hintergrundbilder in die Überschriften-DIVs einbindest.

Du musst ausserdem beachten, dass IDs in einem Dokument eindeutig sein müssen, also nur einmal vergeben
werden dürfen. Du kannst box1 und box2 aber als Klassen definieren. Weiterhin bekommen die Überschriften-DIVs
nummerierte IDs zugewiesen. Die zugehörige Ziffer wird dann beim Aufruf des Scripts mit übergeben und daraus
die ID zusammengestellt und das passende Element ermittelt. In diesem Element wird dann die Grafik getauscht.
Code: 
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function outline(id, intID){
  if(document.getElementById(id).style.display == 'none'){
    document.getElementById(id).style.display = 'block';
    document.getElementById("v_"+intID).style.backgroundImage = "url(../bilder/up.gif)";
  }else{
    document.getElementById(id).style.display = 'none';
    document.getElementById("v_"+intID).style.backgroundImage = "url(../bilder/down.gif)";
  }
}
//-->
</script>


<style type="text/css">
<!--

  body {
      font: 11px Verdana, Arial, Helvetica, sans-serif;
      background-color: #B2B2B2;
  }

  .box1 {
      font: italic 11px Verdana, Arial, Helvetica, sans-serif;
      background-color: red;
      /*float: left;*/
      width: 100px;
      /*text-align: right;*/
  }

  .box2 {
      font: bold 11px Verdana, Arial, Helvetica, sans-serif;
      background-color: green;
      /*float: left;*/
      width: 100px;
  }

  a {
      text-decoration:none;
      margin-left: 24px;
  }

  #v_0, #v_1{ background: red url(../bilder/down.gif) no-repeat;}

-->
</style>
</head>
<body>
<div class="box1" id="v_0">&nbsp;<a href="#" onclick="outline('verwaltung', 0); return false;">test</a></div>
    <span id="verwaltung" style="display:none">
        <div class="box2">&nbsp;Artikel 1</div>
        <div class="box2">&nbsp;Artikel 3</div>
        <div class="box2">&nbsp;Artikel 2</div>
    </span>

<div>&nbsp;</div>

<div class="box1" id="v_1">&nbsp;<a href="#" onclick="outline('artikel', 1); return false;">test 2</a></div>
    <span id="artikel" style="display:none">
    	<div class="box2">&nbsp;Artikel 1</div>
    </span>
</body>
</html>
Vielleicht hilft Dir das weiter.

Ciao
Quaese
 
Vielen dank erstmal für deine Antwort.

Aber wie bekomme ich es dann hin, dass ich einmal das Bild mit dem Pfeil nach oben und dann wenn die Box noch zu ist das Bild mit dem Pfeil nach unten bekomme?
 
Hallo - ich glaube ich werde nicht richtig verstanden.

Also wenn man meinen Beispielquelltext im Browser aufruft dann stehen da zwei rote Balken mit jeweils einem Text als Link - genau daneben (nicht darunter im aufgeklappten Menü) möchte ich eine Grafik haben (mit dem gleichen Link wie der Text) mit einem Pfeil nach unten. Wenn dann das Menü aufgeklappt ist (also wenn man z.B. "Artikel 1", "Artikel 2", "Artikel 3" sieht) dann soll genau diese Grafik sich ändern in einen Pfeil nach oben damit man bei einem klick das Menü wieder zuklappen kann.

Ich habe keine Ahnung wie ich die Änderung der Grafik durchführen soll - kann mir mal jemand einen Quelltextbrocken hinschmeissen - ich habe es noch nicht so mit Javascript in Verbindung mit HTML
 
Hi,

ich kann nicht nachvollziehen, was Quaese da mißverstanden haben soll, denn genau das, was du eben beschrieben hast, läuft in seinem Beispiel ab:

  1. Die Grafik (mit Pfeil nach unten) befindet sich links vom Link, also daneben, und nicht darunter im Submenü.

  2. Beim Öffnen des Submenüs wird die Grafik getauscht, und der Pfeil zeigt nun nach oben.
Hast du dir denn mal den Quellcode kopiert und im Browser deines Vertrauens betrachtet?
 
Oh sorry,

ich habe natürlich nicht das geänderte JavaScript von Quaese gelesen. Hätte ich das getan dann wäre mir aufgefallen, dass er hier die Dateien up.gif und down.gif setzt.

ich hatte nur in der css-Definition den Hinweis auf down.gif gesehen - deshalb war es mir auch nicht klar wie sich die Grafik dann ändern soll.

Jetzt ist es mir klar.

Vielen Dank!
 
Bin wirklich begeistert davon aber ich wollt fragen ob man das möglicherweiße noch so erweitern kann das wenn man die Seite aktualisiert bzw. F5 drückt die Menüs dann wieder so hergestellt werden wie vor der Aktualisierung? Weil wenn ich das Script so verwende und F5 drücke sind die geöffneten Menüs danach wieder geschlossen.

Bitte um eine Antwort

LG Rob
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück