nicht angemeldet
Verschachtelte divs in NN4 ansprechen
Hallo liebes Forum,
zum Thema hab ich zwar einen Haufen Beiträge im Archiv gefunden, aber leider schaffe ich es trotzdem nicht, das Objekt anzusprechen.
Es geht um einen Bildertausch der OnClick durchgeführt werden soll.
Die Bilder, die ausgetauscht werden sollen befinden sich alle in einem div, allerdings gibt es außenherum noch 2 davon.
Also folgendes Konstrukt (vereinfacht dargestellt):
<div id="Content">
<div id="ContentText">
<div id="ImageBox">
<img src="meinbild.gif" id="meinbild">
</div>
</div>
<div>
Ich hab jetzt auf die verschiedensten Arten versucht das Bild, bzw. erstmal nur das div das ich brauche anzusprechen, es klappt aber leider nicht. Per alert kriege ich immer ein "undefined" zurück.
Grundsätzlich hätte ich es so versucht:
document.layers[Content].document.layers[ContentText].document.layers[ImageBox].document.images["meinbild"].src
Das hat aber leider nicht geklappt, dann hab ich es noch mit window.document... versucht usw. und in allem möglichen Kombinationen, aber das scheint so nicht zu funktionieren. Auch wenn ich erstmal nur versuche nur den layer - das div - selbst anzusprechen klappt es nicht.
Ich hab dann auch den divs zusätzlich zur id denselben Namen zugewiesen, aber das hat leider auch nichts verändert.
Kann mir hier jemand weiterhelfen?
Ich weiß dass es dazu schon ziemlich viele Fragen hier im Forum gab ... aber leider komme ich nicht auf den Fehler ...
Lg,
sunny
-
Sorry, bin schon etwas durcheinander,
document.layers[Content].document.layers[ContentText].document.layers[ImageBox].document.images["meinbild"].src
Hier natürlich Anführungszeichen (document.layers["Content"]...)
Lg,
sunny -
gruss sunny,
Grundsätzlich hätte ich es so versucht:
document.layers[Content].document.layers[ContentText].document.layers[ImageBox].document.images["meinbild"].src
... was grundsaetzlich richtig gedacht ist, leider
hast Du die namen der layer nicht in hochkommata
gepackt:document.layers["Content"].document.layers["ContentText"].document.layers["ImageBox"].document.images["meinbild"].src
ausserdem wuerde ich in jedem fall das name-attribut
sowohl in den <div>-tags als auch im <img>-tag setzen;diese layerspezifischen konstrukte erspart
man sich bei verwendung folgender funktion:function getImgObjFromLayer(imgName) {
var imgObj = null;
var findImage = function(docImages) {
for (var i=0; i<docImages.length; i++) {
if (docImages[i].name == imgName) {
imgObj = docImages[imgName];
return true;
break;
}
}
return false;
}
var browseLayers = function(doc) {
if (findImage(doc.images)) {
return;
}
for (var i=0;i<doc.layers.length;i++) {
browseLayers(doc.layers[i].document);
}
}
browseLayers(document);
return imgObj;
}angewandt koennte das ganze dann so aussehen:
if (document.layers) {
getImgObjFromLayer("meinbild").src = "xyz.gif";
} else {
document.images["meinbild"].src = "xyz.gif";
}viel erfolg - by(t)e by(t)e - peterS. - pseliger@gmx.net
-
Hi Peter!
... was grundsaetzlich richtig gedacht ist, leider
hast Du die namen der layer nicht in hochkommata
gepackt:document.layers["Content"].document.layers["ContentText"].document.layers["ImageBox"].document.images["meinbild"].src
Hab ich schon, eigentlich, nur beim Testen dann mal weggegeben und dann versehentlich falsch gepostet.
Versucht hab ich auch document.Content.document.ContentText... aber das klappt ebenfalls nicht. Beim Testen erhalte ich zwar keine Fehlermeldung (auch nicht in der JS-Konsole), aber es funktioniert nicht.ausserdem wuerde ich in jedem fall das name-attribut
sowohl in den <div>-tags als auch im <img>-tag setzen;Hab ich gemacht, alle 3 Layer und das Bild haben das name-attribut.
diese layerspezifischen konstrukte erspart
man sich bei verwendung folgender funktion:function getImgObjFromLayer(imgName) {
var imgObj = null;
var findImage = function(docImages) {
for (var i=0; i<docImages.length; i++) {
if (docImages[i].name == imgName) {
imgObj = docImages[imgName];
return true;
break;
}
}
return false;
}
var browseLayers = function(doc) {
if (findImage(doc.images)) {
return;
}
for (var i=0;i<doc.layers.length;i++) {
browseLayers(doc.layers[i].document);
}
}
browseLayers(document);
return imgObj;
}angewandt koennte das ganze dann so aussehen:
if (document.layers) {
getImgObjFromLayer("meinbild").src = "xyz.gif";
} else {
document.images["meinbild"].src = "xyz.gif";
}Hm, na ja, das sieht interessant aus, aber das jetzt noch in mein Script einzubauen würde wohl etwas umständlich. Ich übergebe nämlich in meiner Funktion bereits die Bildnummer, ich müsste dann noch den Namen mitübergeben etc., weiß nicht ob das so eine gute Idee ist und das Ganze vielleicht doch noch komplizierter macht als es eigentlich sein sollte. Also das Script sieht momentan so aus:
function showimage(imagenumber) {
window.document.images["truckbild"].src = eval("truckbild_" + imagenumber + ".src");if ((navigator.appName=="Netscape")&&(parseInt(navigator.appVersion)==4)) {
if (imagenumber == "1") {
document.layers["Content"].document.layers["ContentText"].document.layers["ImageBox"].document.images["imagebox_2"].src = eval("imagebox_2.src");
document.layers["Content"].document.layers["ContentText"].document.layers["ImageBox"].document.images["imagebox_3"].src = eval("imagebox_3.src");
}
else if (imagenumber == "2") {
document.layers["Content"].document.layers["ContentText"].document.layers["ImageBox"].document.images["imagebox_1"].src = eval("imagebox_1.src");
document.layers["Content"].document.layers["ContentText"].document.layers["ImageBox"].document.images["imagebox_3"].src = eval("imagebox_3.src");
}
else if (imagenumber == "3") {
document.layers["Content"].document.layers["ContentText"].document.layers["ImageBox"].document.images["imagebox_1"].src = eval("imagebox_1.src");
document.layers["Content"].document.layers["ContentText"].document.layers["ImageBox"].document.images["imagebox_2"].src = eval("imagebox_2.src");
}
document.layers["Content"].document.layers["ContentText"].document.layers["ImageBox"].document.images["imagebox_" + imagenumber].src = eval("imagebox_" + imagenumber + "_active.src");
}Das "eval" könnte ich hier eigentlich rausnehmen denke ich, ich hatte es im OriginalScript gebraucht weil es ansonsten in Mozilla nicht funktionieren wollte. Für NN4 sollte es wohl auch ohne gehen, aber ich habs erstmal dringelassen ...
Ich weiß echt nicht warum das so nicht funktionieren will ... womöglich sollte ich wirklich das Ganze Ding umbauen und Dein Script dazueinbinden wenn es keinen besseren Weg gibt. Oder hast Du noch eine Idee woran es liegen könnte? Verstehs einfach nicht ...
Lg,
sunny-
gruss sunny,
Das "eval" könnte ich hier eigentlich rausnehmen denke ich, ich hatte es im OriginalScript gebraucht weil es ansonsten in Mozilla nicht funktionieren wollte. ...
... was ich erstmal nicht glaube;
ohne mich jetzt an der verwendung von eval zu stossen,
habe ich mal versucht, einen dummy zu schreiben, der in etwa
Deinem bis jetzt beschriebenen problem entspricht -da bei Dir keine fehlermeldungen in der js-konsole angezeigt
werden (so sagtest Du jedenfalls), gehe ich davon aus, dass
bei Dir die divs auf alle faelle ueber css positioniert sind;schau mal ueber den dummy - vielleicht fallen Dir grobe
unstimmigkeiten gegenueber Deinem code auf:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>layerEmbededImages.html</title>
<script type="text/javascript">
<!--
var button_1 = new Image();button_1.src = "http://selfhtml.teamone.de/javascript/beispiele/anzeige/button1.gif";
var button_1h = new Image();button_1h.src = "http://selfhtml.teamone.de/javascript/beispiele/anzeige/button1h.gif";
var button_2 = new Image();button_2.src = "http://selfhtml.teamone.de/javascript/beispiele/anzeige/button2.gif";
var button_2h = new Image();button_2h.src = "http://selfhtml.teamone.de/javascript/beispiele/anzeige/button2h.gif";
var button_3 = new Image();button_3.src = "http://selfhtml.teamone.de/javascript/beispiele/anzeige/button3.gif";
var button_3h = new Image();button_3h.src = "http://selfhtml.teamone.de/javascript/beispiele/anzeige/button3h.gif";function highlightButton(number) {
if (document.layers) {
document.layers["content"].document.layers["middleColumn"].document.images["button_"+number].src = eval("button_" + number + "h.src");
} else {
document.images["button_"+number].src = eval("button_" + number + "h.src");
}
}
function resetButtons() {
var imageCollection = ((document.layers) ? (document.layers["content"].document.layers["middleColumn"].document.images) : (document.images));
imageCollection["button_1"].src = button_1.src;
imageCollection["button_2"].src = button_2.src;
imageCollection["button_3"].src = button_3.src;
}
//-->
</script>
<style type="text/css">
<!--
body {
margin-left : 0px;
margin-top : 0px;
margin-right : 0px;
margin-bottom : 0px;
font-family : verdana,geneva,helvetica,arial,sans-serif;
font-size : 0.8em;
color : #000000;
}.floatLeft {float : left;}
div.borderColumn {width : 20%;}
div.contentColumn {width : 60%;}/* !! wichtig !! */
/* ohne "position:[value]" rendert NN4 die <div>-auszeichnungen nicht als layer-objekte */#content {position:relative;}
#leftColumn {position:relative;}
#middleColumn {position:relative;}
#rightColumn {position:relative;}
//-->
</style>
</head><body bgcolor="#f5f5f5" marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">
<div id="content" name="content" style="width:100%">
<br /><br /><br /><br /><br />
<div id="leftColumn" name="leftColumn" class="borderColumn floatLeft"> </div>
<div id="middleColumn" name="middleColumn" class="contentColumn floatLeft">
<a href="javascript://" onmouseover="highlightButton(1)" onmouseout="resetButtons()" onclick="return false"><img src="http://selfhtml.teamone.de/javascript/beispiele/anzeige/button1.gif" name="button_1" width="130" height="30" alt="" title="" border="0" /></a><br />
<a href="javascript://" onmouseover="highlightButton(2)" onmouseout="resetButtons()" onclick="return false"><img src="http://selfhtml.teamone.de/javascript/beispiele/anzeige/button2.gif" name="button_2" width="130" height="30" alt="" title="" border="0" /></a><br />
<a href="javascript://" onmouseover="highlightButton(3)" onmouseout="resetButtons()" onclick="return false"><img src="http://selfhtml.teamone.de/javascript/beispiele/anzeige/button3.gif" name="button_3" width="130" height="30" alt="" title="" border="0" /></a>
</div>
<div id="rightColumn" name="rightColumn" class="borderColumn floatLeft"> </div>
</div>
</body></html>
wenn sich immer noch nichts bewegt, hilft nur noch einsicht
in Deinen kompletten seitencode;by(t)e by(t)e - peterS. - pseliger@gmx.net
-
Das "eval" könnte ich hier eigentlich rausnehmen denke ich, ich hatte es im OriginalScript gebraucht weil es ansonsten in Mozilla nicht funktionieren wollte. ...
... was ich erstmal nicht glaube;
Hm, ich konnte es auch nicht glauben, war aber so.
Ich finde das allerdings auch ziemlich unverständlich, ja.
Wobei mich das im Moment eher weniger stört ;-)da bei Dir keine fehlermeldungen in der js-konsole angezeigt
werden (so sagtest Du jedenfalls),Stimmt, werden keine angezeigt.
gehe ich davon aus, dass
bei Dir die divs auf alle faelle ueber css positioniert sind;Sind sie!
Ich habs jetzt auch geschafft einen korrekten alert rauszukriegen - siehe mein Posting oben, aber das Script selber funktioniert leider immer noch nicht.schau mal ueber den dummy - vielleicht fallen Dir grobe
unstimmigkeiten gegenueber Deinem code auf:...
Nein, mir fallen da jetzt keine groben Unterschiede auf.
/* !! wichtig !! */
/* ohne "position:[value]" rendert NN4 die <div>-auszeichnungen nicht als layer-objekte */Das hab ich geändert, jetzt sollte ich die images ansprechen können, wie gesagt, per alert wird es ja sogar korrekt ausgegeben.
wenn sich immer noch nichts bewegt, hilft nur noch einsicht
in Deinen kompletten seitencode;Puh, da würdet ihr aber nicht erfreut sein da das Ganze noch rauszupfriemeln, ich werd jetzt dann eine neue Seite erstellen die nur die relevanten Codeteile erhält, und dann den Link dazu posten.
Lg,
sunny
-
-
-
-
Hallo,
<div id="Content">
<div id="ContentText">
<div id="ImageBox">
<img src="meinbild.gif" id="meinbild">
</div>
</div>
<div>Ich hab jetzt auf die verschiedensten Arten versucht das Bild, bzw. erstmal nur das div das ich brauche anzusprechen, es klappt aber leider nicht. Per alert kriege ich immer ein "undefined" zurück.
du kannst ja mal probeweise <style>div{position:relative;}</style>
ergänzen, damit alle Divs auch als Layer erscheinen.
Dann sollte (am Seitenende oder onload aufgerufen) <script>
alert(document.layers['Content'].document.layers['ContentText'].document.layers['ImageBox'].document.images['meinbild'].src);
</script> schonmal funktionieren, wenn noch name beim img angegeben ist:
<img src="meinbild.gif" id="meinbild" name="meinbild">Grüsse
Cyx23
-
Hallo Cyx23,
du kannst ja mal probeweise <style>div{position:relative;}</style>
ergänzen, damit alle Divs auch als Layer erscheinen.
Dann sollte (am Seitenende oder onload aufgerufen) <script>
alert(document.layers['Content'].document.layers['ContentText'].document.layers['ImageBox'].document.images['meinbild'].src);
</script> schonmal funktionieren, wenn noch name beim img angegeben ist:
<img src="meinbild.gif" id="meinbild" name="meinbild">Das hab ich jetzt versucht (hab die relative Position im Stylesheet angegeben), aber dann passiert gar nichts, außer dass meine Seite total zerschossen wird, weil die beiden äußeren divs eigentlich absolut positioniert sein müssen. Das innerste ist relativ positioniert.
Der alert wird überhaupt nicht ausgeführt. Schreib ich an dieselbe Stelle ein alert("hello!"); dann funktioniert das allerdings.
Lg,
sunny -
Hallo nochmal,
Wenn ich das mache:
<style>div{position:relative;}</style>
Und am Seitenende den alert:
alert(document.layers['Content'].document.layers['ContentText'].document.layers['ImageBox'].document.images['meinbild'].src);
Dann funktioniert dieser! Vorher kann man wohl das Objekt nicht ansprechen weil es noch nicht geladen ist.
Aaaber: Gebe ich die styles wieder raus, dann funktioniert es wieder nicht mehr. Was könnte ich da jetzt machen? Ich kann die beiden äußeren divs nicht relativ positionieren, sie bestimmen das Erscheinungsbild der ganzen Seite, leider (in dem Fall) ...Gibt es eine Möglichkeit das Problem irgendwie zu umgehen/zu lösen?
Liebe Grüße,
sunny-
Hallo,
Wenn ich das mache:
<style>div{position:relative;}</style>
Und am Seitenende den alert:
alert(document.layers['Content'].document.layers['ContentText'].document.layers['ImageBox'].document.images['meinbild'].src);
Dann funktioniert dieser! Vorher kann man wohl das Objekt nicht ansprechen weil es noch nicht geladen ist.
eben.
Aaaber: Gebe ich die styles wieder raus, dann funktioniert es wieder nicht mehr. Was könnte ich da jetzt machen? Ich kann die beiden äußeren divs nicht relativ positionieren, sie bestimmen das Erscheinungsbild der ganzen Seite, leider (in dem Fall) ...
Gibt es eine Möglichkeit das Problem irgendwie zu umgehen/zu lösen?
Ein div ohne position wird nicht als Layer interpretiert.
Die style-Angabe war ja nur als Test gedacht, jetzt kannst du schauen
ob du bei der Layer-Adressierung einen (zwei?) div (die ganz ohne position)
weglassen musst.Grüsse
Cyx23
-
Hallo!
Ein div ohne position wird nicht als Layer interpretiert.
Die style-Angabe war ja nur als Test gedacht, jetzt kannst du schauen
ob du bei der Layer-Adressierung einen (zwei?) div (die ganz ohne position)
weglassen musst.Also ich habs jetzt geschafft dass ich den richtigen alert kriege (wenn ichs am Dokumentende augeben lasse) und dass das Dokument auch noch richtig aussieht. Aber mein Script funktioniert trotzdem nicht und ich frag mich warum ...
Was mach ich denn jetzt wieder falsch?
function showimage(imagenumber) {
window.document.images["truckbild"].src = eval("truckbild_" + imagenumber + ".src");if ((navigator.appName=="Netscape")&&(parseInt(navigator.appVersion)==4)) {
if (imagenumber == "1") {
document.layers["Content"].document.layers["ContentText"].document.layers["ImageBox"].document.images["imagebox_2"].src = eval("imagebox_2.src");
document.layers["Content"].document.layers["ContentText"].document.layers["ImageBox"].document.images["imagebox_3"].src = eval("imagebox_3.src");
}
else if (imagenumber == "2") {
document.layers["Content"].document.layers["ContentText"].document.layers["ImageBox"].document.images["imagebox_1"].src = eval("imagebox_1.src");
document.layers["Content"].document.layers["ContentText"].document.layers["ImageBox"].document.images["imagebox_3"].src = eval("imagebox_3.src");
}
else if (imagenumber == "3") {
document.layers["Content"].document.layers["ContentText"].document.layers["ImageBox"].document.images["imagebox_1"].src = eval("imagebox_1.src");
document.layers["Content"].document.layers["ContentText"].document.layers["ImageBox"].document.images["imagebox_2"].src = eval("imagebox_2.src");
}
document.layers["Content"].document.layers["ContentText"].document.layers["ImageBox"].document.images["imagebox_" + imagenumber].src = eval("imagebox_" + imagenumber + "_active.src");
}Das funktioniert nicht (kein Fehler - es erscheint ein paar Sekunden die Sanduhr statt dem normalen Mauszeiger, ansonsten geschieht nichts).
Aber das: alert(document.layers["Content"].document.layers["ContentText"].document.layers["ImageBox"].document.images["imagebox_2"].src);
gibt das richtige Image aus!Das div das die Bilder beinhaltet sieht so aus:
<div id="ImageBox" name="ImageBox"><img src="../../../images/imagebox_head.gif" width="147" height="23" alt=""><a href="#" onClick="showimage('1');"><img src="../../../images/imagebox_1_active.gif" width="15" height="23" alt="" border="0" id="imagebox_1" name="imagebox_1"></a><a href="#" onClick="showimage('2');"><img src="../../../images/imagebox_2.gif" width="15" height="23" alt="" border="0" id="imagebox_2" name="imagebox_2"></a><a href="#" onClick="showimage('3');"><img src="../../../images/imagebox_3.gif" width="27" height="23" alt="" border="0" id="imagebox_3" name="imagebox_3"></a>
<img src="../../../images/truckvoting_beispiel1.jpg" width="185" height="102" alt="Truckvoting" class="imagebox" id="truckbild" name="truckbild">
<img src="../../../images/imagebox_foot.gif" width="204" height="8" alt=""></div>Das müsste doch stimmen? Ich verstehs einfach nicht ...
Vielleicht ist es ja nur ein blöder Fehler den ich jetzt nicht sehe, hoffentlich ...
Liebe Grüße,
sunny-
hallo again sunny, gruss Cyx23;
na klasse - bei mir haengt das forum,
und hier geht es munter weiter ?-(@sunny
Das div das die Bilder beinhaltet sieht so aus:
<div id="ImageBox" name="ImageBox"> ... </div>
Das müsste doch stimmen? Ich verstehs einfach nicht ...
und wie sieht Dein css (nicht nur)
fuer '<div id="ImageBox" ...' aus ?#Content {position:absolute; ...}
#ContentText {position:absolute; ...}
#ImageBox {position:absolute; ...}peterS. - pseliger@gmx.net
-
Hallo ihr zwei!
na klasse - bei mir haengt das forum,
und hier geht es munter weiter ?-(Also bei mir war das Forum ebenfalls eine zeitlang nicht erreichbar.
Mein Gratis-Webspace übrigens komischerweise auch nicht, darum hat es so lange gedauert.Hier nun der Link, hab die meisten überflüssigen Dinge aus der Seite rausgeschmissen, das Problem sollte jetzt ganz gut nachvollziehbar sein. Den alert hab ich auch mal drinnengelassen:
http://www33.brinkster.com/enomis/test/de/folder/index/netscape.htm
Es ist mir immer noch ein Rätsel warum der alert funktioniert, aber der Bildwechsel nicht ... muss ein ziemlich blöder Fehler sein ...
Lg,
sunny-
Huch, jetzt hab ich in der JavaScript-Konsole doch plötzlich Fehler stehen "Imagenumber" is not defined. Komisch, bei mir lokal schreibt er (Netscape) das nicht rein. Sehr eigenartig.
Da scheint etwas mit der Variablenübergabe nicht zu klappen, aber warum das denn? Jetzt kenn ich mich gar nicht mehr aus ... :-/
Grüße,
sunny-
Ich habs, ich hatte noch 2 Fehler im Script, eine Klammer vergessen und außerdem einmal das Objekt nicht über document.layer usw. angesprochen, hatte ich übersehen weils ganz oben im Script stand.
Ich hoffe ich krieg das jetzt so hin, danke jedenfalls für eure Hilfe!
Falls es nicht klappt muss ich mich wohl noch einmal melden, aber auf meiner Testseite funktioniert es jetzt, ich muss es nur noch in die "richtige" Seite intergrieren!
Thanx very much,
sunny
-
-
-
-
-
-
-