nicht angemeldet
Ab hier wird es für mich gerade etwas konfus, auch wenn ich das mit der von dir geposteten Testseite vergleiche.
Zugegeben, einfach ist es nicht :)
Ich verstehe durchaus, das du anscheinend sowohl die Funktion zum ausklappen, zur Manipulation des Textinhaltes und die Zuweisung der onMouseover-Effekte in der Funktion zusammen führst und diese dann über das "Name"-Attribut im Link aufrufst.
Gut zu wissen :)
Da im Quelltext ja gar kein mouseover mehr vorkommt.
Ja, Javascript ist eine eigene Schicht und sollte vom HTML getrennt sein.
Nach 2 Tagen Javascript, ist obige Funktion dann aber leider doch über meinem Horizont ! (4 Wochen CSS und HTML haben so schon die grauen Zellen beansprucht...)
Was genau verstehst du nicht?
Auch kann ich dem Quelltext deiner Testseite leider nicht entnehmen, was du an meiner Funktion geändert hast. Denn bei dir funktioniert das ein und ausklappen, bei mir leider noch nicht wie gewünscht !
Eigentlich nicht viel. Relevant ist eigentlich nur die Funktion ein_ausblenden, der du als erstes die ID des zu blendenden Elementes und als zweites die Richtung ('in' für Einblenden, 'out' für ausblenden) übergibst. Mal der Reihe nach:
if(typeof blende != 'undefined') window.clearInterval(blende);
Es passiert, dass man vor Vollendung des Blendvorganges bereits den nächsten anstößt, weil man mit der Maus schneller ist als mit der Blenderei. Dagegen muss man was tun, ich stoppe hier halt den noch nicht abgeschlossenen Blendvorgang. Sicher nicht die eleganteste Lösung, aber zum Testen reicht's.
var obj = document.getElementById(elemID);
var elem = document.getElementById(elemID).style;
Ich hole mir Referenzen auf zwei Objekte, nämlich das HTML-Objekt, das geblendet werden soll, und seine CSS-Styles. Dann muss ich nicht bei jedem Zugriff das ganze getElement-Gedöns schreiben.
if(Direction == 'in') {
obj.innerHTML = Blendtext[elemID];
pixel = Blendtext.Start;
blende = window.setInterval("blende_ein()", 20);
}
Der Zweig zum Einblenden wird angestoßen, wenn als Wert für Direction 'in' übergeben wurde. Im ersten Schritt weise ich dem HTML-Element den gewünschten HTML-Inhalt via innerHTML zu. Dann lege ich fest, dass die Starthöhe des Elementes der konfigurierten Starthöhe entspricht, nämlich 0. Damit habe ich alle Voraussetzungen geschaffen, um den Blendvorgang (gesteuert durch den zeitverzögerten Aufruf von blend_ein in der vierten Zeile) anzustoßen.
else if(Direction == 'out') {
pixel = Blendtext.Ende;
blende = window.setInterval("blende_aus()", 20);
}
Der Zweig zum Ausblenden wird angestoßen, wenn als Wert für Direction 'out' angegeben wurde. Weil ausgeblendet werden soll, wird die Starthöhe des Elementes auf das konfigurierte Maximum (hier 200) gesetzt. Damit habe ich alle Voraussetzungen geschaffen, um den Blendvorgang (gesteuert durch den zeitverzögerten Aufruf von blend_aus in der dritten Zeile) anzustoßen.
else {
return;
}
Dieser Zweig steuert das Verhalten, wenn Direction irgendein anderer Wert als in oder out übergeben wurde. Die gesamte Funktion wird einfach beendet.
Damit endet eigentlich die Hauptfunktion ein_ausblenden, fehlen nur noch blend_ein und blend_aus, die ich als Closure definiert habe, also als Funktion in einer Funktion. Dies hat zwei Gründe: Zum einen werden sie nirgendwo anders benötigt als in der Funktion ein_ausblenden und zum zweiten ergeben sie keinerlei Sinn, wenn man sie direkt aufrufen könnte (was man bei Closures prinzipiell eben nicht kann). Folgendes ginge also in die Hose:
<a href="index.html" onmouseover="blende_ein()">Index</a>
Freilich muss man das nicht zwingend so machen, ich halte es aber für eleganter und übersichtlicher. Die zwei eigentlichen Blendfunktionen:
blende_ein = function() {
elem.height = pixel + 'px';
pixel = pixel + 4;
if ( pixel > Blendtext.Ende ) {
window.clearInterval(blende);
}
}
blende_aus = function() {
elem.height = pixel + 'px';
pixel = pixel - 4;
if ( pixel < Blendtext.Start ) {
window.clearInterval(blende);
}
}
Diese Funktionen habe ich nahezu unverändert von Dir übernommen, sollte es da Verständnisprobleme geben, frage nochmal nach.
Für mich wäre daher wirklich erstmal wichtig, das ich die Funktion für aus und einklappen korrekt hinbekomme inkl. einem Aufruf "onmouseover" und "onmouseout" im Bild/Link, bevor ich dann in Schritt zwei versuche das "elegant" in einer Funktion im Head zusammen zu fassen, wie von dir hier anscheinend beabsichtigt...
Ich hoffe, dass meine Erläuterungen Dir helfen, mein Beispiel zu verstehen. Du solltest Dir von Anfang an einen ähnlichen Stil der JS-Programmierung angewöhnen, wie ich es in meinem kleinen Beispiel demonstriert habe (Lesestoff zum Einstieg hatte ich dir gegeben). Du wirst dafür sehr viel lesen müssen, das meiste davon erst beim dritten oder vierten Mal verstehen, und für deine Programmierung um einiges länger brauchen als mit dem Drauflos-Stil, den du momentan noch hast (der für einen Anfänger völlig in Ordnung ist, aber auf Dauer Deine Scripte versauen wird). Also nicht verzagen, sooo schlimm ist es wirklich nicht :)
Siechfred
Struppi