nicht angemeldet
JavaScript-Funktion lässt Hintergrundbild verschwinden.
Hallo und guten Abend!
Ich fürchte ich habe die Suchfunktion dieses Forums bald überstrapaziert, und bin leider nicht auf einen Beitrag gestoßen der mir mit meinem Problem weiterhilft.
Und zwar ist das folgendes:
Ich habe eine Beispielseite erstellt, auf der vor einem Hintergrundbild mittels einer Javascriptfunktion eine waagerechte Linie, gebildet aus grauen Kästchen angezeigt werden soll.
Das Hintergrundbild ist ganz gewöhnlich in den Body-Tag eingebunden, und die JavaScriptfunktion zum Erzeugen der Kästchen soll onLoad aufgerufen werden:
------------------------
<body background = "Wolken.jpg" onLoad ="PunkteZeichnenWaagerecht();">
------------------------
Ich bin davon ausgegangen, das nun mein Hintergrund angezeigt, und dann die grauen Kästchen draufgezeichnet werden. Pustekuchen :-)
Das Hintergrundbild verschwindet, und es werden nur die Kästchen angezeigt! Lasse ich den Funktionsaufruf weg, sehe ich mein Hintergrundbild.
Das gilt für IE genauso wie für Firefox.
Die Funktion, die die grauen Kästchen zeigt, sieht so aus:
--------------------------------------------
function PunkteZeichnenWaagerecht()
{
for(i=0;i<=70;i++)
{
document.write('<div style="position: absolute; visibility: inherit; TOP:'+ (posPunktTop)+'; LEFT:'+ (i * posPunktLeft) +';">');
document.write('<IMG src="' + BildRechteck.src + '">');
document.write('</div>');
}
}
--------------------------------------------
Mittels des <IMG src="' + BildRechteck.src + '"> möchte ich auf den im Bildobjekt gespeicherten Pfad zugreifen, was auch richtig funktioniert. Aber leider kann der Firefox damit anscheinend nicht umgehen, denn dort sehe ich gar nichts vom Bild.
Wenn ich ohne ein Objekt arbeite und einen festen Dateipfad angebe, habe ich das Problem, das beide Browser nicht aufhören Daten zu laden und dadurch immer ein Mauscursor mit Sanduhr angezeigt wird. Mit der oben beschriebenen Version funktionierts wenigstens im IE problemlos ;-)
Aber, ich würde hier nicht posten, wenn ich nicht wenigstens schon ein paar Dinge herausgefunden hätte, und zwar im Bezug auf das Hintergrundbildproblem:
Wenn ich in die PunkteZeichnenWaagerecht()-Funktion eine einzige Zeile Quelltext hinzufüge, gibts auch ein Hintergrundbild:
---------------------------------------------
function PunkteZeichnenWaagerecht()
{
document.write('<BODY background = "' + BildHintergrund.src + '"></BODY>');
...s.o...
}
---------------------------------------------
Ich bin allerdings vollkommen ratlos warum das funktioniert und bin fast sicher, das ich damit nicht problemlos arbeiten kann. Hat da vielleicht jemand eine Idee?
Aber: Lange Rede, kurzer Sinn, mene Fragen nochmal zusammengefasst:
1. Warum verschwindet mein Hintergrundbild wenn ich die PunkteZeichnenWaagerecht()-Funktion im onLoad aufrufe?
2. Wie kann man in der PunkteZeichnenWaagerecht()-Funktion beiden Browsern (oder am besten, allen ;-) ) den Dateipfad des Rechteckbildes schmackhaft machen?
Wer mag, kann sich die Seite unter http://www.check-tec.de/SeitenTest/ForumBeispiel1.html ansehen, dort habe ich im Quelltext auch nochmal alles kommentiert und beschrieben.
Vielen Dank schonmal für eure Geduld und Hilfe :-)
Liebe Grüße,
Lisa
-
hi,
Das Hintergrundbild ist ganz gewöhnlich in den Body-Tag eingebunden, und die JavaScriptfunktion zum Erzeugen der Kästchen soll onLoad aufgerufen werden:
<body background = "Wolken.jpg" onLoad ="PunkteZeichnenWaagerecht();">
Dieser Body verschwindet, sobald du folgendes machst:
Die Funktion, die die grauen Kästchen zeigt, sieht so aus:
function PunkteZeichnenWaagerecht()
{
for(i=0;i<=70;i++)
{
document.write('...document.write, nach dem Fertigladen der Seite aufgerufen, ersetzt das komplette Dokument.
Wenn ich in die PunkteZeichnenWaagerecht()-Funktion eine einzige Zeile Quelltext hinzufüge, gibts auch ein Hintergrundbild:
function PunkteZeichnenWaagerecht()
{
document.write('<BODY background = "' + BildHintergrund.src + '"></BODY>');Ja, dann enthält das neue Dokument einen Body mit deinen Angaben.
Ich bin allerdings vollkommen ratlos warum das funktioniert und bin fast sicher, das ich damit nicht problemlos arbeiten kann. Hat da vielleicht jemand eine Idee?
1. Nutze CSS für sämtliche die Darstellung betreffenden Sachen - auch für Hintergrundbilder.
2. Nutze nicht document.write, um neuen Inhalt ins Dokument zu schreiben, sondern nutze die DOM-Methoden createElement, appendChild/insertBefore & Co., um neue Elemente zu erzeugen und einzuhängen.gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; } -
Hallo Lisa,
document.write('<div style="position: [usw]
write() und writeln() arbeiten anders, als Du scheinbar annimmst -
beide Funktionen schieben sozusagen nur Inhalt an das Ende eines
gerade offenen Dokumentes (siehe open()); wenn beim ersten
write/ln()-Aufruf kein offenes Dokument existiert, wird automatisch
ein neues erstellt und die bereits bestehende Seite ersetzt - in
dieser neuen Seite befindet sich dann auch nur, was Du selbst
einsetzt, oder zuvor über open()-Parameter vorgegeben hast - also
erst einmal weder HTML-Struktur noch Hintergrundbild (besser wäre
übrigens, das Bild auch gleich via CSS einzubinden).Grundsätzlich solltest Du write() und Konsorten also nie über einen
Eventhandler (onload, onchange etc.) auslösen (es sei denn, Du willst
beispielsweise explizit eine neue Seite in einem weiteren Fenster
öffnen - und auch dazu gibt es ganz entschieden negative Meinungen ;)- bevor Eventhandler vom Client überhaupt interpretiert werden, ist
die Seite immer vollständig geladen (und somit nicht mehr offen).
Eine Variante wäre also, statt dem onload="" einen Skriptbereich an
der Position im HTML-Gerüst zu benutzen, wo die Linie dargestellt
werden soll.
Wenn Du unbedingt Javascript in einer rein darstellerischen Funktion
verwenden musst, dann wäre es eventuell günstiger, die Seite mit -
z.Bsp - einem schon eingebundenen und eventuell versteckten Kästchen
zu öffnen, und es dann via Javascript nur noch sichtbar zu machen und
zu duplizieren (schau Dich mal nach Javascript DOM Funktionen um);
dann liesse sich auch onload="" verwenden. - bevor Eventhandler vom Client überhaupt interpretiert werden, ist