nicht angemeldet
onMouseover Funtion korrekt aufrufen
StruppiHi @all...
ein Neuling ist unter euch... Vor ca. 4 Wochen habe ich angefangen mich mit dem Thema der Homepage Erstellung zu beschäftigen und bin soweit eigentlich auch sehr zufrieden mit den Ergebnissen. http://www.weltraum-visionen.de
Vor allem auch Dank dieses Forums, wo ich seit dieser Zeit begeisterter Leser bin. Die ersten rudimentären Kenntnisse in Sachen HTML, CSS und nun Javascript sind nun vorhanden, zumindest wenn es um das Verständniss geht. Allerdings fehlt mir nach der kurzen Zeit leider manchmal immer noch die richtige Synthax um das gewünschte Ergebniss zu erzielen.
Diesmal versuche ich gerade mit Javascript zu spielen. Die Codeschnipsel dafür habe ich mir aus diversen Foren zusammen gelesen, kopiert und leicht individuell angepasst. In Summe funktioniert es sogar wie gewünscht, aber halt noch nicht gaaaanz exakt wie gewollt.
Also:
Ziel ist ein ausklappender Hintergrund für das Textfeld auf der Startseite, obwohl das Script auch auf andere Elemente anwendbar wäre. Das Script soll bei onMousover eines Bildes auf der Seite mit einem implementierten Link erfolgen. Dazu habe ich erstmal im CSS das <div> deklariert:
<style type="text/css">
#box {
display:block;
position:relative; top:10px; left:10px;
height:240px;
width:200px;
background-image:url("file:///C:/Programme/NetObjects/NetObjects Fusion 10.0/User Sites/CSSTest/Assets/grey2.gif");
background-repeat:no-repeat;
background-position:top center;
overflow:hidden;
border:0px solid #999999;
padding-left:20px;
padding-right:20px;
padding-top:5px;
z-index:1;
}
</style>
Die ID "box" habe ich dem Textfeld zugewiesen. Anschliessend nun das Javascript für das ausklappen des Hintergrundes (wobei ja eigentlich das ganze Textfeld aufgeklappt wird und nicht nur der Hintergrund):
<script type="text/javascript">
var pixel = 0;
function test() {
var elem = document.getElementById("box").style;
elem.height = pixel ;
pixel = pixel + 4;
if ( pixel == 200 ) { // Wenn der Bereich höher als 200px wird, dann...
clearInterval(neu);
}
}
window.onload = function() { neu = window.setInterval("test()", 20) };
</script>
Das ist eigentlich schon alles an Code bisher und es funktioniert auch wunderbar. Aber: Ich möchte das script nicht beim laden der Seite ausführen. Ich habe 5 Infotexte, die ich per onMouseOver einbelnden möchte mit diesem Script. Und eigentlich bei onMouseOut auch wieder ausblenden. Alles in demselben Textobjekt.
Für das wechelsen des Textes werde ich mit .innerHTML arbeiten und das funtioniert auf der Startseite auch bereits.
Für das ausblenden werde ich das Script einfach kopieren und statt + mit -px ausstatten. Aber wie muss ich nun obiges Script abändern, das es sozusagen "in Bereitschaft ist" beim laden der Seite und erst bei onMouseOver startet?
Meine Fragen zu obigem Code sind somit nun folgende:
a) wie muss obiges Script richtig abgeschlossen/verändert werden, das es in Bereitschaft ist mit laden der Seite und
b) wie rufe ich anschliessend im Link die Funktion korrekt auf?
c) wie verkette ich die einezlenen Anweisungen bei onMouseover? (.innerHTML Text wechseln UND Aufruf der Funktion zum aufklappen)?
d) Kann ich zwei onMouseOver-Events aufmachen und zwei onMouseOut-Events in einem Link die chronologisch abgearbeitet werden?
e) es hat bei mir noch nicht wirklich "Klick" gemacht, wann ich in Anweisungen Bereiche mit ' ' oder mit " " einschliesse.
Die Funktionen und Abläufe kann ich im Regelfall grundsätzlich nachvollziehen, egal ob hier, CSS oder HTML... Aber wenn man neu dabei ist, fehlt einem halt ab und zu die richtige Synthax... Das ganze entwickelt sich halt gerade zu einem neuen Hobby.
In der Hoffnung auf kompetente Hilfe... Gruss Mac
-
a) wie muss obiges Script richtig abgeschlossen/verändert werden, das es in Bereitschaft ist mit laden der Seite
Du bindest es wie gewohnt im Head der Seite via script-Element ein.
b) wie rufe ich anschliessend im Link die Funktion korrekt auf?
Jetzt wird's ein bisschen diffiziler :)
"Unobstrusive Javascript" sollte dir ein Begriff sein, ansonsten siehe den hervorragenden Beitrag von molily im Weblog.Du hast verschiedene Links, denen du via onmouseover eine bestimmte Funktionalität zukommen lassen möchtest (ich nenne die Funktion mal ein_ausblenden). Damit die Funktion weiß, was sie ein- bzw. auszublenden hat, musst du ihr einen Parameter übergeben, anhand dessen erkannt wird, in welchem Kontext wir uns befinden. Das könnte z.B. vom HTML her so aussehen:
<ul id="navigation"> <li><a name="link1" href="seite1.html">Seite 1</a></li> <li><a name="link2" href="seite2.html">Seite 1</a></li> <li><a name="link3" href="seite3.html">Seite 1</a></li> </ul>Hier gibt es keinerlei Eventhandler, diese fügst du dynamisch nach Laden der Seite hinzu. Beim Einbinden der JS-Datei im Headbereich werden alle direkt notierten Anweisungen ausgeführt, das ist wichtig zu wissen. Dein JS könnte dann z.B. so aussehen:
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 } // 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;Lies den Code von unten nach oben, um ihn zu verstehen.
c) wie verkette ich die einezlenen Anweisungen bei onMouseover? (.innerHTML Text wechseln UND Aufruf der Funktion zum aufklappen)?
Zuerst manipulierst du den Inhalt, dann klappst du auf.
d) Kann ich zwei onMouseOver-Events aufmachen und zwei onMouseOut-Events in einem Link die chronologisch abgearbeitet werden?
Ja, in den Eventhandler-Attributen steht stinknormales Javascript drin. Besser wäre es m.E., nur eine Funktion zuzuweisen und diese dann alle Arbeiten erledigen zu lassen.
e) es hat bei mir noch nicht wirklich "Klick" gemacht, wann ich in Anweisungen Bereiche mit ' ' oder mit " " einschliesse.
Das ist in JS eigentlich egal, da es keine Interpolation gibt. Wichtig ist nur, dass du die Anführungszeichen richtig verschachtelst oder maskierst.
Siechfred
-
Hi Siechfred und alle anderen Antworter...
danke für deine Testseite! Ich versuche mal zusammen zu fassen, was ich aus den bisherigen Antworten und Beispielen verstanden habe, bzw. nachvollziehen kann.
<ul id="navigation">
<li><a name="link1" href="seite1.html">Seite 1</a></li>
<li><a name="link2" href="seite2.html">Seite 1</a></li>
<li><a name="link3" href="seite3.html">Seite 1</a></li>
</ul>Diese Liste müsste für mich in diesem Sinne irrelevant sein, da ich ja mit 5 transparenten Gifs arbeite, die meine Links auf die Unterseiten enthalten. Wichtig jedoch, das ich den Bildern ein konkretes "Name"\_Attribut mitgebe zur Identifizierung. Da ich mit einem Bild arbeite, habe ich aber auch nur die Option, vor dem Tag des Bildes eine ID oder Name-Attribut zu definieren für das gesamte Bild. Das onmouseover kann ich dagegen in den Tag packen. > ~~~javascript 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 > } > > // 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;Lies den Code von unten nach oben, um ihn zu verstehen.
Ab hier wird es für mich gerade etwas konfus, auch wenn ich das mit der von dir geposteten Testseite vergleiche. 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. Da im Quelltext ja gar kein mouseover mehr vorkommt. 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...)
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 !
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...
Danke und Gruss... Mac
-
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
-
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-
// 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
-
Hi Sichfred...
langsam muss ich gestehen wird es mir etwas unangenehm, da ich anscheinend irgend etwas nicht wirklich verinnerlicht habe und es nicht wie gewünscht realisiert bekomme....
Vielleicht können wir daher einfach mal eine Fehleranalyse meines jetzt eingebauten Codes angehen...? Ich denke ich habe eventuell einige Fehler im Aufbau oder Deklaration falsch...
Also: begonnen logischerweise in dem ich das <div> meiner Textbox definiert habe im Head:
<style type="text/css">
#box {
display:block;
position:relative; top:10px; left:10px;
height:0px;
width:200px;
background-image:url("../assets/images/grey2.gif");
background-repeat:no-repeat;
background-position:top center;
overflow:hidden;
border:0px solid #999999;
padding-left:20px;
padding-right:20px;
padding-top:5px;
z-index:1;
}
</style>Die ID dem Textfeld zugewiesen und danach noch die Links der Bilder mit einem Name Attribut versehen: Hier exemplarisch das erste Bild rechts oben auf der Seite.
<a href="./index.html"><img id="Bild3" height="40" width="44" src="file:///C:/Programme/NetObjects/NetObjects Fusion 10.0/User Sites/CSSTest/Assets/auge40.jpg" border="0" alt="auge40" title="auge40" name="foo"; onmouseover = "ein_ausblenden(this.name, 'in');"></a></div>
Hier ist also onMouseOver realisiert und dem Bild das Name Attribut "name="foo" übergeben. Alles weitere findet dann nun im Script statt:
<script type="text/javascript">
function ein_ausblenden(elemName, Direction) {
if(typeof blende != 'undefined') window.clearInterval(blende);
var Blendtext = new Object; /*Blindtext muss doch als "var" definiert werden, oder nicht?*/
var Blendtext.HTMLObjID = 'box';var Blendtext.Start = 0;
var Blendtext.Ende = 240;var Blendtext.foo = "<p>Beschreibung zu Link 1</p>";
var Blendtext.bar = "<p>Beschreibung zu Link 2"</p>";var obj = document.getElementById(Blendtext.HTMLObjID);
var elem = document.getElementById(Blendtext.HTMLObjID).style;if(Direction == 'in') {
obj.innerHTML = Blendext[elemName];
pixel = Blendtext.Start;
blende = window.setInterval("blende_ein()", 20);
}else if(Direction == 'out') {
pixel = Blendtext.Ende;
blende = window.setInterval("blende_aus()", 20);
}else {
return;
}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);
}
}
}
</script>--------------------- Hier endet mein Code, ab hier zietiere ich mit deinen Codezeilen aus deinem vorherigen Post ------------------
<img src="foo.gif" name="foo">
<img src="bar.gif" name="bar">
> > Dynamisch hinzugefügt wird > > `onmouseover = "ein_ausblenden(this.name, 'in');"`{:.language-HTML} Oder habe ich hier bereits grundsätzlich falsch verstanden, WO du Mouseover und Name="foo" implementierst? Ist (this.name) ein Automatismus, der direkt das Name-Attribut ausliest? > 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: »» Habe ich überhaupt eine Möglichkeit aus dem Quelltext deiner Testseite die TestTextfeld.js auszulesen oder einzusehen??? > ~~~javascript 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.
Prinzip verstanden, an der Umsetzung hakt es aber wie gesagt. Als Variable definieren? über der Funktion platzieren, direkt nach Einleitung des Scripts?
function ein_ausblenden(elemName, Direction) {
Wird hier automatisch die var=elemName mit "this.name" aus dem Mouseover "versorgt"? Hätte dafür nicht elemName noch als var im Vorfeld definiert werden müssen?
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];Hier hänge ich daran, wie elemName wie oben bereits erwähnt mit "Inhalten" versorgt wird.
pixel = Blendtext.Start;
blende = window.setInterval("blende_ein()", 20);
}
else if(Direction == 'out') {
pixel = Blendtext.Ende;
blende = window.setInterval("blende_aus()", 20);
}
// restlicher Code
}> Das habe ich zumindest in Gänze verstanden... wenigstens etwas... Wie gesagt, langsam ist es mir echt etwas unangenehm, da ich trotz querlesen in diversen Foren und Tutorials nicht hinter das Geheimniss komme, was ich denn gerade falsch mache... Und ich nicht nachvollziehen kann, ob es ein gravierender Fehler ist, oder einfach nur Fehler in der korrekten Schreibweise.... Vielen Dank für deine Geduld bis hierher... Ist sicher nicht selbstverständlich...! Ich habe nun meine Testseite mit oben beschriebenen Code nochmals online gestellt... Resultat? Es tut sich leider absolut nix...:-( <http://www.tuff-tuff.de/test/html/testtextfeld.html> Danke und Gruss.... Mac-
Ich habe nun meine Testseite mit oben beschriebenen Code nochmals online gestellt... Resultat? Es tut sich leider absolut nix...:-(
Nicht?
Ich bekomme auf der Seite eine Fehlermeldung. Du weißt wo diese angezeigt werden?Struppi.
-
Hi Struppi..
Fehlermeldung? Öhm... grübel... Ich bekomme diese nur, wenn ich den Link auch anklicke ! Und es ist auch nur das erste Bild rechts oben rechts mit einem Link versehen... der Link selbst geht ins Leere sozusagen, da die entsprechende Seite nicht publiziert ist... Ich habe ihn nur eingefügt, um das Mouseover aktivieren zu können... Welches aber wie gesagt leider nicht funktioniert...
Ansonsten kann ich die Seite aber ganz normal ansehen und bekomme keine Fehlermeldung....
Gruss Mac
-
Fehlermeldung? Öhm... grübel... Ich bekomme diese nur, wenn ich den Link auch anklicke !
Im Firefox Menü: Extras > Fehlerkonsole
Struppi.
-
Fehlermeldung? Öhm... grübel... Ich bekomme diese nur, wenn ich den Link auch anklicke !
Im Firefox Menü: Extras > Fehlerkonsole
Struppi.
Ok, das sind natürlich dann doch einige Fehlerwerte... Das kannte ich noch nicht im Firefox... Nur die Fehler die dort genannt/aufgeführt werden, helfen mir leider nicht weiter, da sie sich auf meine Verständnissprobleme im vorhin geposteten Script beziehen, bzw. direkt damit zusammen hängen...
Langsam aber sicher beginne ich an meinem logischen Denken zu zweifeln das richtig nachvollziehen zu können....:-(
Gruss Mac
-
HEUREKA !!!
Tausend Dank an euch alle... Wer lesen kann ist klar im Vorteil und es waren doch noch 2,3 kleinere Tippfehler im Code... Da bin ich meinem Rechner dann auch nicht böse, wenn er mich nicht versteht...!
Nun heisst es das gelernte und verstandene a) zu behalten und b) richtig einzusetzen...
Und nochmals Danke für deine Geduld Siechfred... 3 Kinder scheinen da ein dickes Fell zu produzieren.... :-)
Gruss und bis bald... Mac
-
-
-
-
-
<a href="./index.html"><img id="Bild3" height="40" width="44" src="file:///C:/Programme/NetObjects/NetObjects Fusion 10.0/User Sites/CSSTest/Assets/auge40.jpg" border="0" alt="auge40" title="auge40" name="foo"; onmouseover = "ein_ausblenden(this.name, 'in');"></a></div>
In Deinem HTML sind die Anführungszeichen falsch verschachtelt sowie ein Semikolon und ein paar Leerzeichen zu viel:
<img id="Bild3" height="40" width="44" src="../assets/images/auge40.jpg" border="0" alt="auge40" title="auge40" name="foo" onmouseover="ein_ausblenden(this.name, 'in');">So wäre es richtig.
Oder habe ich hier bereits grundsätzlich falsch verstanden, WO du Mouseover und Name="foo" implementierst?
Ich mache das am Ende des eingebundenen JS-Scripts via window.onload, du schreibst es statisch ins HTML. Das Ergebnis ist das Gleiche.
Ist (this.name) ein Automatismus, der direkt das Name-Attribut ausliest?
In dem Fall ja. "this" ist in diesem Kontext eine Referenz auf das HTML-Element, über dem onmouseover gefeuert hat, bei Dir das IMG-Element. "this.name" enthält den Wert des name-Attributes.
Habe ich überhaupt eine Möglichkeit aus dem Quelltext deiner Testseite die TestTextfeld.js auszulesen oder einzusehen???
Ja, sie ist im Head eingebunden, du kannst sie Dir aber auch direkt ansehen:
http://test.anaboe.net/testtextfeld.jsPrinzip verstanden, an der Umsetzung hakt es aber wie gesagt. Als Variable definieren? über der Funktion platzieren, direkt nach Einleitung des Scripts?
Ja. Wenn man eine JS-Datei im Head-Bereich einbindet, wird in ihr enthaltener JS-Code ausgeführt, und somit auch die Definition des Blendtext-Objektes.
function ein_ausblenden(elemName, Direction) {
Wird hier automatisch die var=elemName mit "this.name" aus dem Mouseover "versorgt"? Hätte dafür nicht elemName noch als var im Vorfeld definiert werden müssen?
Nein.
obj.innerHTML = Blendtext[elemName];
Hier hänge ich daran, wie elemName wie oben bereits erwähnt mit "Inhalten" versorgt wird.Indem der Funktion elemName übergeben wird. Das Objekt Blendtext hat für jeden möglichen Namen eine Eigenschaft, also Blendtext.foo, Blendtext.bar usw., in welcher der Erläuterungstext gespeichert ist. Da man aber bei Objekt.Eigenschaft den Namen der Eigenschaft kennen muss, dieser aber in der Funktion variabel ist (es soll ja verschiedene Texte geben), muss man es halt so schreiben, wie oben: Objekt[Variable_mit_dem_Name_der_Eigenschaft].
Ich habe nun meine Testseite mit oben beschriebenen Code nochmals online gestellt... Resultat? Es tut sich leider absolut nix...:-(
Auf die Fehlerkonsole hat Dich Struppi bereits hingewiesen. Nur zum Einstieg:
[code lang=Javascript]var Blendtext = new Object;
var Blendtext.HTMLObjID = 'box';var Blendtext.Start = 0;
var Blendtext.Ende = 240;var Blendtext.foo = "<p>Beschreibung zu Link 1</p>";
var Blendtext.bar = "<p>Beschreibung zu Link 2"</p>";Du hast Blendtext als Variable definiert, deren Gültigkeit sich auf die umschließende Funktion beschränkt. Jedesmal, wenn sie aufgerufen wird, wird das Blendtext-Objekt neu angelegt. Das vermeidest Du, indem Du oben stehenden JS-Code nach Korrekturen vor der Funktion einfügst. Zu den Fehlern: Du definierst mit `var Blendtext = new Object();`{:.language-Javascript} Deine Variable Blendtext (in diesem Fall als Objekt). Wenn Du zu diesem Objekt Eigenschaften definierst (HTMLObjID, Start, Ende, foo und bar), darfst Du kein var vor die Zuweisungen setzen, denn die Variable Blendtext ist bereits definiert. Das ist die Hauptursache für den JS-Fehler, alles andere sind Tippfehler, die bekommst Du alleine raus :) Siechfred
-
-
-
-
-
-
-
a) wie muss obiges Script richtig abgeschlossen/verändert werden, das es in Bereitschaft ist mit laden der Seite und
Gar nicht!
Lass einfach die window.onload-Anweisung weg.b) wie rufe ich anschliessend im Link die Funktion korrekt auf?
<a href="javascript:test()">Linktext</a>
oder
<a href="#" onclick="test();return false">linktext</a>c) wie verkette ich die einezlenen Anweisungen bei onMouseover? (.innerHTML Text wechseln UND Aufruf der Funktion zum aufklappen)?
onmouseover="funktionA();funktionB()"
d) Kann ich zwei onMouseOver-Events aufmachen und zwei onMouseOut-Events in einem Link die chronologisch abgearbeitet werden?
nein!
e) es hat bei mir noch nicht wirklich "Klick" gemacht, wann ich in Anweisungen Bereiche mit ' ' oder mit " " einschliesse.
achte auf
"'klick'" oder '"klick"', also die richtige Reihenfolge beim Öffnen und Schließen, ansonsten sind sie gleichwertig.-
<a href="javascript:test()">Linktext</a>
Nein, so bitte nicht. Wenn ein Link verwendet wird, dann sollte er nicht mit Javascript zweckentfremdet werden und als Fallback für JS-lose Clients den Link dorthin enthalten, wo es hingehen soll.
<a href="#" onclick="test();return false">linktext</a>
Und so bitte auch nicht, wenn ein Verweis kein Ziel im Sinne von HTML hat, dann ist es keiner. Zu diesem Zweck gibt es andere Elemente, die man entsprechend mit CSS aufhübschen kann.
Siechfred
-
<a href="javascript:test()">Linktext</a>
Nein, so bitte nicht. Wenn ein Link verwendet wird, dann sollte er nicht mit Javascript zweckentfremdet werden und als Fallback für JS-lose Clients den Link dorthin enthalten, wo es hingehen soll.
<a href="#" onclick="test();return false">linktext</a>
Und so bitte auch nicht, wenn ein Verweis kein Ziel im Sinne von HTML hat, dann ist es keiner. Zu diesem Zweck gibt es andere Elemente, die man entsprechend mit CSS aufhübschen kann.
Ist das ein akademisches Problem oder gibts dafür eine solidere Erklärung als "so bitte nicht". Wobei die 2te Variante ja durchaus den Einbau eines Notlinks offenlässt. Ob dies in diesem Fall sinnvoll ist liegt aber außerhalb meiner Kenntnisse.
-
Ist das ein akademisches Problem
Auch, ja :)
oder gibts dafür eine solidere Erklärung als "so bitte nicht".
Hm, ich hab's doch versucht zu erklären.
Wobei die 2te Variante ja durchaus den Einbau eines Notlinks offenlässt.
Wenn du <a href="#">Link</a> verwendest, wird bei JS-losen Benutzern an den Seitenanfang gesprungen. Ein leeres href-Attribut verweist auf die Seite selber, also neuer Request zum Server. Das sind beides Effekte, die (akademisch) nicht dem Sinn und Zweck eines Links entsprechen und (praktisch) den Nutzer verwirren können. Will man nur eine JS-Funktion ausführen, dann sollte man kein A-Element verwenden, sondern etwas anderes (einen Button bspw.).
Siechfred
-
-
Hi @all..
Danke schonmal für alle bisherigen Antworten. Dadurch bin ich nun schon mal ein Stückchen weiter gekommen und habe auch im Ansatz ein erwartetes Resultat erhalten. Ich habe hier mal den aktuellen Test online gestellt:
http://www.tuff-tuff.de/test/html/testtextfeld.htmlDas zusammenfassen in einer unsortierten Liste aller Links auf der Seite wie von Siechfred beschrieben erschliesst sich mir jedoch noch nicht völlig...
Ich habe nun zwei Funtkionen im Head der Seite stehen, die auch beide irgendwie arbeiten:
<script type="text/javascript">
var pixel = 0;
function test() {
var elem = document.getElementById("box").style;
elem.height = pixel ;
pixel = pixel + 4;if ( pixel == 200 ) { // Wenn der Bereich höher als 200px wird, dann...
clearInterval(neu);
}
}
function() { neu = window.setInterval("test()", 20) };
</script><script type="text/javascript">
var pixel2 = 200;
function test2() {
var elem = document.getElementById("box").style;
elem.height = pixel2 ;
pixel2 = pixel2 - 4;if ( pixel2 == 1 ) { // Wenn der Bereich höher als 200px wird, dann...
clearInterval(neu);
}
}
function() { neu = window.setInterval("test2()", 20) };
</script>und der Aufruf über dem Bild mit Mouseover sieht folgendermassen aus:
onMouseover="document.all.box.innerHTML='<span>Entdecken, Begreifen, Träumen<br><br> Ob es die Space Shuttles, unser Aussenposten im All die ISS, Roboter auf dem Mars. oder Satelliten auf ihrer Reise durchs Sonnensystem sind. Hier wird es um alles gehen, was wir selbst in den Weltraum schiessen...</span>';test();return false";
onMouseout="test2();return false";
Was bewirkt hier return false?
Wie man aber nun auf der Testseite sehen kann, wird immer nur eine Codezeile des scripts ausgeführt. Statt also das gesamte Textfeld aufzuklappen, wird bei jedem einzelnen Mouseover das Feld immer nur um 4 px erweitert und umgekehrt bei mouseout um 4 px verkleinert... (Einfach zigmal über das weisse Quadrat gehen und wieder runter davon, dann zeigt sich der Effekt)
Ausserdem, kann ich eigentlich beide Funktionen in einer Deklaration unterbringen?
<script type="text/javascript">
function test
function test2
</script>Sicherlich bin ich auf der Suche nach dem richtigen Code um alles wie gewollt zu realisieren, aber viel wichtiger ist mir eigentlich hinter das Prizip des Aufbaus zu kommen dabei....
Danke für die Unterstützung.... Mac
-
Hm, so ganz hast du offenbar nicht verstanden, worauf ich hinaus will. Deshalb habe ich dir mal ein Beispiel hochgeladen:
http://test.anaboe.net/testtextfeld.html
Schau mal in den Quelltext der HTML-Datei: Keinerlei JS-Code, alles ist in testtextfeld.js definiert. Das meinte ich mit Unobstrusive Javascript.
Siechfred
-
-
-