nicht angemeldet
Hi Sichfred...
erstmal vielen, vielen Dank für die ausführlichen Erklärungen! So langsam kommt wirklich Licht ins Dunkel! Ein paar Unklarheiten habe ich jedoch noch, bevor ich wirklich sagen kann das ich alles verstanden habe...
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:
Hier mein erstes Verständniss Problem. In einem deiner vorhigen Post hast du zu der Funktion ein_ausblenden folgendes geschrieben:
function ein_ausblenden(was) {
// in 'was' steht der Name des Links, der onmouseover ausgelöst hat
// in Abhängigkeit davon manipulierst du den Text
// und blendest das manipulierte DIV ein
}
Das "zu blendende Element" ist in meinem Fall die ID="box" (mein Textfenster, den es wird immer nur dieses Element geblendet mit wechselnden Inhalten. ID-Element Textfeld, oder auslösender Link Name...???
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.
>
Hier ist soweit alles klar und auch verstanden.
> ~~~javascript
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.
Hier das nächte Vertsändnissproblem: Du schreibst "Blendtext". Dieses ist (da über innerHTML angesprochen) mein Text, der im box-Element erscheinen soll. Dieser Text wird durchaus ein paar Zeilen umfassen. Wird dieser "Blendtext" also hier nun in "" geschrieben über mehrere Zeilen und in Zeile 3 (und nachfolgend) nochmals wiederholt? Dieser Blendtext ist dann aber in der Funktion nur einmal definiert... Ich müsste in aber je nach Link anders formulieren. Daher dachte ich daran, den "Blendtext" im Link selbst per Mouseover auszutauschen über innerHTML und in der Funktion wirklich nur das blenden ablaufen zu lassen. Ausserdem: verstehe ich das richtig, das die Höhe meines box-Elements hier automatisch an die Höhe des Blendtextes angepasst wird durch pixel=Blendtext? Ich werde weiterhin meine "absolute" Höhe von 200-240px benötigen um den gesamten Hintergrund der box darstellen zu können.
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.
>
> ~~~javascript
else {
> return;
> }
Wo und wie nun genau die 200 definiert werden ist mir unklar. In deinem Quelltext deiner Testseite hattest du deine eigene Box mit height=0 definiert. Ich habe in meinem <div> der box die 200 stehen. Was ist nun der richtige Ansatz?
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>
Heisst das, das du nach der Hauptfunktion des blendens eine weitere Funktion aufmachst in der du blende_ein und blende_aus einen eigenen Funktionsnamen gibst, oder ist das Closure darauf bezogen, das sie als Funktionen innerhalb der Hauptfunktion "ein_ausblenden" stecken und durch das abschliessen der Hauptfunktion durch die Klammer } eingeschlossen sind?
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.
>
Hier kommt wieder meine Frage von oben in Bezug auf die Variable "Blendtext" Auch sind die Start/Endwerte aus meiner Funktion halt durch die Variable Blendtext ersetzt. Wo und wann wird Blendtext also überhaupt definiert?
> Ich hoffe, dass meine Erläuterungen Dir helfen, mein Beispiel zu verstehen.
Definitiv ist das der Fall... Herzlichen Dank dafür schonmal zum jetzigen Zeitpunkt. Wo meine Verständnissprobleme halt zum Teil noch sitzen ist unter anderem, welches "fixe" Javascript Befehle/Definitionen sind (z.b. ".Start" ".Ende" " 'in' " " 'out' ") und was frei definierte Variablen sind. Oder auch zum Beispiel die Funktionsweise von zwei ==.
Nun aber noch etwas generelles was mir absolut unklar ist, wie ich es richtig umsetzte:
> // diese Funktion verpasst allen Links ein onmouseover
> function addMouseEventsToLinks() {
> var prevLink = '';
> var linkColl = document.getElementById('navigation').getElementsByTagName('a');
> for(i=0; i<linkColl.length;i++) {
> linkColl[i].onmouseover = function() { ein\_ausblenden(this.name); }
> }
> }
»»
> // nach Laden der Seite führe addMouseEventsToLinks aus
> window.onload = addMouseEventsToLinks;
Was hier passiert ist mir klar. Nur wie gesagt arbeite ich nicht mit einer Liste oder Navigationsleiste in dem Sinne. Es existieren statt dessen 5 transparente Bilder und ein Textfeld ID="box". Würde diese Funktion auch greifen, wenn ich dem Layout die ID="navigation" zuweise? Dann habe ich aber immer noch keine Liste für die Links an sich, sondern immer noch 5 Bilder, denen ich vor dem Tag sagen könnte <div name="Link1"> und nach dem Tag schliesse mit </div>. Dann wäre dem Link auch ein name-Attribut hinzugefügt, aber ich weiss nicht, ob ich dann noch das "ByTagName" so abgreifen kann wie von dir oben beschrieben.
Wie gesagt, bekomme ich deine Funtkion trotz vielfachen probieren leider immer noch nicht korrekt zum laufen. Nichts desto trotz habe ich nun bereits viel gelernt. Und es sei dir versichert, ich lese momentan mehr, als das ich wirklich an der Seite rumschraube. Und die ersten zwei kleine Bücher über HTML und CSS habe ich mir auch bereits gekauft...:-) Diese "einfach drauf los Mentalität" hat aber halt am Anfang auch einfach den Vorteil, das man Resultate sehr fix sieht, auch wenn sie ertmal fehlerhaft sind. Try and Error... Aber in Summe hast du recht, das man sich direkt die richtigen Strukturen zu eigen machen sollte....
Ich würde mich freuen, wenn wir hier, bezogen auf mein persönliches Beispiel, noch zu einem funktionerenden Code kommen werden.
Gruss und einen schönen Samstag... Mac
Struppi