Bilder «DIV» und Javascript im Communicator
Alexander Stengle
Ich habe das IMG-Tag mit dem DIV-Tag geklammert,
um den Bildern eine exakte Position auf der Website
zu geben.
Jetzt möchte ich die Bilder dynamisch mit Javascript
austauschen. Dazu verwende ich folgenden
Javascript-Befehl:
document.images[3].src = "../bilder/dk_k.gif";
Mit dem IE 4.0 funktioniert alles Bestens. Der
Communicator macht Ärger:
"document.images[3] has no properties."
Er findet also das Bild-Objekt nicht. Hat jemand
von Euch eine Idee, wie ich an das Bild-Objekt
im Communicator komme.
Vielen Dank für Eure Hilfe,
Alexander
du musst in netscape LAYER, nicht DIV benutzen,
IE = DIV
NS = LAYER
ist halt, so
WARUM KÖNNEN SICH DIE BEIDEN NICHT AUF EINEN STANDART EINIGEN !!
du musst in netscape LAYER, nicht DIV benutzen,
IE = DIV
NS = LAYER
ist halt, so
Hmmm, *grummel*.
Ist natuerlich nicht so. Selbstverstaendlich kann Netscape auch mit dem DIV Tag umgehen.
Zum Problem.
Ganz so einfach ist es natuerlich nicht eine BIld anzusprechen, wenn es in einem DIV
steckt. Wenn Du aber schon mit DHTML arbeitest, warum machst du dann nicht einfach noch
ein Layer mit dem andern BIld drin. Dann musst Du nur die Layer sichtbar bzw. unsichtbar
machen.
Hallo,
Ist natuerlich nicht so. Selbstverstaendlich kann Netscape auch mit dem DIV Tag umgehen.
Stimmt.
Ganz so einfach ist es natuerlich nicht eine BIld anzusprechen, wenn es in einem DIV
steckt.
Nein, leider muss man fuer Navi und MSIE verschiedende Wege gehen.
Das OM von Netscape ist anders aufgebaut als das von MSIE.
Fuer MSIE kann man so etwas schreiben, egal wie tief in irgendwelchen DIVs oder sonstwas das Image-Objekt steckt:
document.images['das_Bild'].src = "../bilder/dk_k.gif";
Es gibt nur 1x document.
Netscape hat sich einfallen lassen, jedem Layer-Objekt eine eigene document-Eigenschaft zuzuordnen.
Layer-Objekt bitte nicht verwechseln mit den netscapespezifischen Layern (LAYER-Tag).
Neben denen definieren auch Styles (z.B. mit DIV) Layer-Objekte.
So etwas etwa:
#irgendwas {position:absolute; top:300px; left:100px; ... }
...
<DIV ID="irgendwas">
hier steht halt was drin, evtl. so ein Bild
<IMG ... NAME="das_Bild" ...>
</DIV>
...
Damit entsteht ein Layerobjekt document.layers['irgendwas'] mit einer eigenen document-Eigenschaft, der dann endlich das Image-Objekt zugeordnet ist.
Zu theoretisch?
Eine der Moeglichkeiten, es anzusprechen:
window.document.layers['irgendwas'].document.images['das_Bild'].src = "../bilder/dk_k.gif"; (hoffentlich nicht vertippt)
Um diese Unterscheiderei der Browser fuehrt im Moment kein Weg herum.
Mann kann sich einiges vereinfachen, wenn es um komplexere Scripts geht, indem man sich browserabhaengig eigene Objekte definiert, da dann universell nutzbar sind. Damit wird es etwas einfacher. Was bleibt, ist allerdings trotzdem Aufwand, den man betreiben muss, auch wenn nur dazu da, sich an anderer Stelle die Geschichte zu vereinfachen.
Wie lange wir noch damit leben muessen?
Ich fuerchte, es dauert noch. Working Draft zur DOM-Spezifikation liegt zumindest schon mal vor http://www.w3.org/TR/WD-DOM/. Aber von da bis zu Browsern, die dann endlich ein einheitliches OM benutzen, ist noch ein Stueck Weg.
Christine
Hallo Christine,
an dieser Stelle einfach nur mal vielen Dank fuer Deine ausfuehrlichen, kompetenten und selbstlosen Antworten, die Du hier immer wieder beisteuerst!
Viele Gruesse
Stefan Muenz
Vielen Dank für Eure Tips von Gestern. Die haben mir weitergeholfen.
Ich habe inzwischen eine komplett 2. Programmierung für den NC 4.0 geschrieben und die Sache funktioniert.
Ich bin allerdings noch nicht ganz glücklich!
Beim dynamischen Austauschen der Bilder muß ich alle Bilder die eventuell benötigt werden im voraus laden. Es kommen aber ca. 120 Bilder zum eventuellen Einsatz, die jeweils ca. 2 KB groß sind. Das ist zuviel um alles im voraus zu cachen.
Ich möchte nur die Bilder laden, die auch angezeigt werden.
Wie kann ich nur das Bild laden, das auch ausgetauscht werden soll?
Ich habe bereits mit image.complete experimentiert. führte aber bisher nicht zum Erfolg. Diese Objekt-Methode funktioniert nur für Bilder die im Dokument
geladen werden und nicht für Bilder, die in eine Variable gecacht werden.
Vielen Dank für Eure Tips von Gestern. Die haben mir weitergeholfen.
Na bitte, lohnt sich die Muehe des Tippens, also :-)
Beim dynamischen Austauschen der Bilder muß ich alle Bilder die eventuell benötigt werden im voraus laden. Es kommen aber ca. 120 Bilder zum eventuellen Einsatz, die jeweils ca. 2 KB groß sind. Das ist zuviel um alles im voraus zu cachen.
Ich möchte nur die Bilder laden, die auch angezeigt werden.
Wie kann ich nur das Bild laden, das auch ausgetauscht werden soll?
Hm, verstehe ich nicht ganz.
Kennst Du die Bilder, die gebraucht werden?
Wenn ja, warum dann andere vorladen?
Wenn nein, wie willst Du auswaehlen?
Ich habe bereits mit image.complete experimentiert. führte aber bisher nicht zum Erfolg. Diese Objekt-Methode funktioniert nur für Bilder die im Dokument
geladen werden und nicht für Bilder, die in eine Variable gecacht werden.
Das stimmt nicht, funktioniert fuer jedes Image-Objekt, egal wie definiert, ob per HTML (<IMG>) oder JavaScript (new Image())
Es gibt nur leider auch da Browserbugs. Navi4.03 ist so ein Kandidat. Der erkennt complete nicht oder nicht immer, zumindest bei animierten GIFs bleibt das ewig false.
Andere Grafiken? Weiss nicht.
Allerdings begreife ich nicht, wie Du das fuer Dein Vorhaben ueberhaupt einsetzen willst.
Christine
Ich arbeite an einem Internet Auftritt für einen
Kugelschreiber Hersteller. Ein Kugelschreiber besteht
aus 5 bis 7 Teilen. Jedes Teil gibt es in 20 bis 36
Farben.
Meine Aufgabe ist es eine Javascript zu schreiben,
mit dem ich Teile eines Kugelschreibers austauschen
kann. Damit kann man dann alle Varianten auf dem
Bildschirm generieren, die es von einem Kugelschreiber
gibt.
Das Ganze funktioniert auch schon. Nur muß ich beim
NC alle Bilddateien die eventuell benötigt werden,
und das können bis zu 150 Dateien sein, im voraus in
Bild-Objekte laden. Es ist allerdings sehr unwahrscheinlich das jemand alle Kombinationen die möglich sind erstellt.
Deshalb würde ich gerne nur die Teile des Stifts laden,
die tatsächlich auf dem Bildschirm angezeigt werden
sollen. Das weiß ich erst kurz bevor ein Bild aus-
getauscht werden soll.
Einfach alle Teile im voraus zu laden benötigt eine
viel zu lange Ladezeit (150 Dateien, 350 KB).
Meine Aufgabe ist es eine Javascript zu schreiben,
mit dem ich Teile eines Kugelschreibers austauschen
kann. Damit kann man dann alle Varianten auf dem
Bildschirm generieren, die es von einem Kugelschreiber
gibt.
...
Deshalb würde ich gerne nur die Teile des Stifts laden,
die tatsächlich auf dem Bildschirm angezeigt werden
sollen. Das weiß ich erst kurz bevor ein Bild aus-
getauscht werden soll.
Einfach alle Teile im voraus zu laden benötigt eine
viel zu lange Ladezeit (150 Dateien, 350 KB).
Das waere in dem Fall auch Unsinn, denke ich.
Ich wuerde gar nicht vorladen. Die Dateien sind doch sicher nicht riesig. Und ein bisschen Wartezeit kann man wahrscheinlich in dem Moment auch verkraften.
Dieses Vorladen hat ja eigentlich nur den Sinn, dass Dateien in einem bestimmten Moment sehr schnell da sind. Fuer diese ganzen mouseover-Sachen z.B. braucht man das, weil ja gleich und sofort der Wechsel erfolgen muss.
Dein Problem ist ein aber ein anderes.
Hast Du z.B. so etwas:
<IMG SRC="..." NAME="das_Teil' ...>
dann sollte es vollkommen langen, in dem Moment, in dem dieses Kugelschreibereinzelteil ausgewaehlt wird,
self.document.das_Teil.src = 'das_Teil_in_gruen.gif';
auszufuehren.
Christine