nicht angemeldet
// 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...???
Ja, Fehler meinerseits. Wenn Du Dir dir Funktion in testtextfeld.js anschaust, siehst du, dass es sich um die ID des zu blendenden Elementes handelt, das ja bei Dir immer 'box' ist. Mir ging es darum zu erkennen, über welchem Element onmouseover gefeuert hat, um danach den richtigen Text in die Box einzufügen. Bei Dir sähe es etwa so aus:
<img src="foo.gif" name="foo">
<img src="bar.gif" name="bar">
Dynamisch hinzugefügt wird
onmouseover = "ein_ausblenden(this.name, 'in');"
Damit weiß die Blendfunktion, welchen Text sie nehmen soll (zur Konfiguration später): Feuert onmouseover über dem ersten Bild, wird die Funktion ein_ausblenden mit den Parametern 'foo' (this.name) und 'in' aufgerufen, beim zweiten Bild mit 'bar' und 'in'. Damit hat man eindeutig geklärt, welcher Text es sein soll.
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 der Konfigurationsabschnitt im oberen Teil von testtextfeld.js. Dieser auf deinen Fall und mein Beispiel mit den zwei Bildern umgemünzt sähe dann wie folgt aus:
Blendtext = new Object;
// ID des zu blendenden HTML-Elementes
Blendtext.HTMLObjID = 'box';
// Startwert fürs Einblenden
Blendtext.Start = 0;
// Maximalwert und Startwert fürs Ausblenden
Blendtext.Ende = 200;
// Texte zu den einzelnen Grafiken
Blendtext.foo = "<h2>Link 1</h2><p>Beschreibung zu Link 1";
Blendtext.bar = "<h2>Link 2</h2><p>Beschreibung zu Link 2";
Dieser Code legt ein Objekt "Blendtext" an und speichert alle *statischen* Informationen. Das ist sinnvoll, wenn du den Code wiederverwenden willst, dann musst du Werte nur an einer Stelle ändern (z.B. die ID des Blendelementes) und nicht in die eigentlichen JS-Funktionen eingreifen.
Die Funktion ein_ausblenden müsstest du in der Einleitung so ausgestalten:
function ein_ausblenden(elemName, Direction) {
if(typeof blende != 'undefined') window.clearInterval(blende);
var obj = document.getElementById(Blendtext.HTMLObjID);
var elem = document.getElementById(Blendtext.HTMLObjID).style;
if(Direction == 'in') {
obj.innerHTML = Blendtext[elemName];
pixel = Blendtext.Start;
blende = window.setInterval("blende_ein()", 20);
}
else if(Direction == 'out') {
pixel = Blendtext.Ende;
blende = window.setInterval("blende_aus()", 20);
}
// restlicher Code
}
verstehe ich das richtig, das die Höhe meines box-Elements hier automatisch an die Höhe des Blendtextes angepasst wird durch pixel=Blendtext?
Nein, die Zuweisung lautet pixel = Blendtext.Start bzw. Blendtext.Ende. In diesen Eigenschaften des Objektes Blendtext stehen die Start- und Endwerte (s.o.). Die kannst Du natürlich anpassen, indem du im Konfigurationsabschnitt andere Wert nimmst, z.B. hierfür:
Ich werde weiterhin meine "absolute" Höhe von 200-240px benötigen um den gesamten Hintergrund der box darstellen zu können.
Wo und wie nun genau die 200 definiert werden ist mir unklar.
Im Konfigurationsabschnitt ganz am Anfang.
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?
Kommt drauf an. In meinem Beispiel sollten die Boxen halt von Haus aus unsichtbar sein und nur bei mouseover ein- bzw. bei mouseout ausgeblendet werden.
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?
Letzteres.
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?
Im bereits genannten Konfigurationsabschnitt.
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.
Du kannst so ziemlich jedem HTML-Element ein onmouseover bzw. -out verpassen, also auch den Grafiken (sieh Dir meine Ergänzung am Anfang dieses Postings an).
Ich würde mich freuen, wenn wir hier, bezogen auf mein persönliches Beispiel, noch zu einem funktionerenden Code kommen werden.
Och, das sollten wir hinbekommen :)
Ich habe mal mein Onlinebeispiel so abgeändert, wie du es vermutlich machen willst.
Siechfred
Struppi