Klappfeld / Klapptext
Wer kennt das nicht: Man möchte einfach bei den News n bisschen Platz sparen, aber kann sich nicht helfen ... Hier wäre eine mögliche Lösung:
Zuerst benötigen wir mal eine JavaScript Datei mit der Endung .js:
java_klappe.js
Nun zur Erklärung: Wir beginnen hier eine Funktion zu schreiben mit dem Namen klappe(id). Der Paramtere id ist später dann wichtig, falls wir mehrere Dinge zum "ver"klappen haben.
Als nächstes werden 2 Variable deklariert. Zum einen klappText und klappBild. Diesen beiden Variablen geben wir das Element von dem jeweiligen Objekt zurück, das ausgewählt wurde. Diese Funktion nennt sich getElementById(). Hierbei gibt man den Namen als Parameter ein und erhält das Element. Damit können wir dann später Eigenschaften einfacher bearbeiten.
Nun fragen wir mittels if() ab, ob der Text aufgeklappt oder zugeklappt ist. Der Text wird ja später von einem <div> Tag umschlungen sein, der auf Befehl, Dinge anzeigen kann und Dinge verbergen kann. Somit fragen wir nun, ob der Text bereits verborgen ist oder nicht und machen je nachdem das andere. Genauso ändern wir das jeweilige Bild von einem Plus zu einem Minus. Wichtig ist natürlich, dass der Pfad zu euren beiden Bildern passt
Nun schaun wir uns das ganze noch in einer HTML Datei an:
Das sollte vielleicht noch verständlich sein: Hier wird die JavaScript Datei eingebunden. Ratsam wäre es, diese Zeile innerhalb des <body> Tag's einzufügen.
Dieser Code muss nach der JavaScript Einbindung stehen. Hier wird nun ein einfacher Link zur JavaScript Funktion gelegt und mit ihm auch der Paramter für das jeweilige Klapptextchen. Beim Bild-Tag ist vorerst wichtig das die id am anfang "pic" stehen hat, und anschließend die zum link und div passende zahl. Beim <div> muss mann die id ebenfalls an die anderen werte anpassen und der style muss so wie er hier oben steht eingefügt werden.
Zwischen den <div> Tag's kommt dann euer Text.
Viel Spaß
Zuerst benötigen wir mal eine JavaScript Datei mit der Endung .js:
java_klappe.js
function klappe(id)
{
var klappText = document.getElementById('k' + id);
var klappBild = document.getElementById('pic' + id);
if (klappText.style.display == 'none') {
klappText.style.display = 'block';
klappBild.src = 'minus.gif';
}
else {
klappText.style.display = 'none';
klappBild.src = 'plus.gif';
}
}
Nun zur Erklärung: Wir beginnen hier eine Funktion zu schreiben mit dem Namen klappe(id). Der Paramtere id ist später dann wichtig, falls wir mehrere Dinge zum "ver"klappen haben.
Als nächstes werden 2 Variable deklariert. Zum einen klappText und klappBild. Diesen beiden Variablen geben wir das Element von dem jeweiligen Objekt zurück, das ausgewählt wurde. Diese Funktion nennt sich getElementById(). Hierbei gibt man den Namen als Parameter ein und erhält das Element. Damit können wir dann später Eigenschaften einfacher bearbeiten.
Nun fragen wir mittels if() ab, ob der Text aufgeklappt oder zugeklappt ist. Der Text wird ja später von einem <div> Tag umschlungen sein, der auf Befehl, Dinge anzeigen kann und Dinge verbergen kann. Somit fragen wir nun, ob der Text bereits verborgen ist oder nicht und machen je nachdem das andere. Genauso ändern wir das jeweilige Bild von einem Plus zu einem Minus. Wichtig ist natürlich, dass der Pfad zu euren beiden Bildern passt
Nun schaun wir uns das ganze noch in einer HTML Datei an:
<script type="text/javascript" src="java_klappe.js"></script>Das sollte vielleicht noch verständlich sein: Hier wird die JavaScript Datei eingebunden. Ratsam wäre es, diese Zeile innerhalb des <body> Tag's einzufügen.
<a href="javascript: klappe('1')"><img src="plus.gif" id="pic1" border="0"></a>
<br><br><div id="k1" style="display: none;">Verborgener Text!</div>Dieser Code muss nach der JavaScript Einbindung stehen. Hier wird nun ein einfacher Link zur JavaScript Funktion gelegt und mit ihm auch der Paramter für das jeweilige Klapptextchen. Beim Bild-Tag ist vorerst wichtig das die id am anfang "pic" stehen hat, und anschließend die zum link und div passende zahl. Beim <div> muss mann die id ebenfalls an die anderen werte anpassen und der style muss so wie er hier oben steht eingefügt werden.
Zwischen den <div> Tag's kommt dann euer Text.
Viel Spaß
on Wednesday 25. February 2004 at 15:33
genau :)
on Wednesday 25. February 2004 at 22:55
verdamm toll :)
<br>
<br>muss ich wenn ich mehrer untermenus hab, die funktion einfach nochmal einfügen unter anderem namen?
<br>
<br>is doch ansich das eeinfachste für einen js-krüppel wie mich, oder?
<br>
<br>danke, das tutorial ist toll :)
on Monday 8. March 2004 at 23:30
die funktion bleibt immer dieselbe. jedoch solltest du bei den paramteren aufpassen das du die richtigen angibst!
on Monday 8. March 2004 at 23:35
achso, jetzt wo ich´s mir nochmal angucke seh ich das mit der id erst :P
on Friday 17. June 2005 at 14:02
einfach geil,danke
on Thursday 23. June 2005 at 01:49
ey das erste Tut in der hinsicht was ich geschnallt habe und was auf anhieb gefunzt hat !!! Respekt !
geil sowas hab ich schon immer gesucht und wer ein bisschen überlegt kann dass für ein Baum menü verwenden