Imagewechsel mit Variablen funktioniert nicht (xy.src)

[Landolt]

Ich versuche mich schon seit Stunden an diesem Problem.
Ich moechte mit einem Link mitgeben, welchen Bild auf der neuen Seite geaendert werden muss.
Mein Problem ist die Zusammensetzung will irgendwie nicht richtig.
Beim Alert kommt die Ausgabe als "h1" aber der Ausdruch sei bei bild.src undefieniert. Wenn ich aber direkt anstatt "bild.src" "h1.src" schreibe geht es.
Wo koennte da das Problem liegen?

Aufruf:

<A HREF="ortslage.html?1">ortslage</A>

Empfang:

<SCRIPT language="JavaScript">
<!--
var uebergabe="";
uebergabe=window.location.search;
if (uebergabe!=""){
seite=uebergabe.slice(1);
bild = "h" + seite;
alert(bild);
window.document.images["Bildname"+seite].src = bild.src;
}
//-->
</SCRIPT>

[Cheatah]

Hi,

bild = "h" + seite;
alert(bild);
window.document.images["Bildname"+seite].src = bild.src;

der String(!) bild hat keine Eigenschaft namens src. Lasse das also einfach weg.

Cheatah

[Landolt]

Danke fuer die schnelle Antwort
Aber ich denke es ist nicht richtige Loesung.
Ich habe weiter oben die Bilder definiert:

h1 = new Image(); h1.src = "images/menu/ortslage_h.gif";

Hi,

bild = "h" + seite;
alert(bild);
window.document.images["Bildname"+seite].src = bild.src;

der String(!) bild hat keine Eigenschaft namens src. Lasse das also einfach weg.

Cheatah

[Cheatah]

Hi,

Aber ich denke es ist nicht richtige Loesung.
Ich habe weiter oben die Bilder definiert:

h1 = new Image(); h1.src = "images/menu/ortslage_h.gif";

ein Image-Objekt hat im Gegensatz zum String eine src-Eigenschaft. Deswegen benutzt man sie dort.

window.document.images["Bildname"+seite].src = xyz

In dem Moment, wo die src-Eigenschaft eines document.images-Objektes verändert wird, fordert der Browser die entsprechende URI an. Eine URI besteht aus Text (=String), braucht also kein src oder sonstwas.

Cheatah

[Landolt]

Hi,

Aber ich denke es ist nicht richtige Loesung.
Ich habe weiter oben die Bilder definiert:

h1 = new Image(); h1.src = "images/menu/ortslage_h.gif";

ein Image-Objekt hat im Gegensatz zum String eine src-Eigenschaft. Deswegen benutzt man sie dort.

window.document.images["Bildname"+seite].src = xyz

Aber ich definier ja vor dem = auch eine src. Deswegen braucht es einen Verweis auch auf den Source. Mit nur xyz versucht der Browser ein Bild zu laden das xyz heisst und nicht das Image-Objekt.
Ein normales Mouseover definiert man ja auch so:

function Bildwechsel(Bildnr,Bildobjekt)
    {
     window.document.images[Bildnr].src = Bildobjekt.src;
    }

Oder Siehe auch Beispiel aus selfhtml/tecbbe.htm

Zweitbild = new Image();
  Zweitbild.src = "blau.gif";
  document.images[0].src = Zweitbild.src;

In dem Moment, wo die src-Eigenschaft eines document.images-Objektes verändert wird, fordert der Browser die entsprechende URI an. Eine URI besteht aus Text (=String), braucht also kein src oder sonstwas.

Wenn ich folgendes Schreibe geht es. Aber wenn h1 in einer Variablen drin steht, die dann z.B. var bild="h"+uebergabewert; heisst, geht es nicht.

h1 = new Image(); h1.src = "images/menu/ortslage_h.gif";
window.document.images["Bildname"+seite].src = h1.src;

[Cheatah]

Hi,

Aber ich definier ja vor dem = auch eine src. Deswegen braucht es einen Verweis auch auf den Source.

ja. Wie kommst Du darauf, daß der Eigenschaftswert auch Eigenschaft eines Objektes sein muß? <../../tecbbe.htm#a9>

Mit nur xyz versucht der Browser ein Bild zu laden das xyz heisst und nicht das Image-Objekt.

Richtig. Und etwas anderes willst Du nicht, wenn ich Dich richtig verstehe.

Zweitbild = new Image();
  Zweitbild.src = "blau.gif";
  document.images[0].src = Zweitbild.src;

var Zweitbild = "blau.gif";
document.images[0].src = Zweitbild;

Funktioniert exakt so, nur wird die Grafik dann erst bei document.images... in den Browsercache geladen.

Wenn ich folgendes Schreibe geht es. Aber wenn h1 in einer Variablen drin steht, die dann z.B. var bild="h"+uebergabewert; heisst, geht es nicht.

Doch, wenn Du nur bild zuweist, nicht bild.src.

Cheatah

[Landolt]

Hi

Ich glaube wir reden ein wenig aneinander vorbei.

Ich mache ja genau das wie aus <../../tedg.htm>
Statt der Wechsel bei onmouseover will ich ihn beim laden der Seiten machen. Mit Uebergabe welches Bild gewechselt werden muss.

Dort wird ja auch folgendes gemacht:

Zweitbild = new Image();
  Zweitbild.src = "blau.gif";
  document.images[0].src = Zweitbild.src;

und nicht:

var Zweitbild = "blau.gif";
document.images[0].src = Zweitbild;

Ist mir schon klar das beides funktioniert.

Mein Grundproblem ist eigentlich einfach das:
Dies geht:
h1 = new Image(); h1.src = "images/menu/ortslage_h.gif";
window.document.images["titel"+seite].src = h1.src;

Dies nicht:
h1 = new Image(); h1.src = "images/menu/ortslage_h.gif";
bild="h1";
window.document.images["titel"+seite].src = bild.src;

Was ist der Unterschied, wenn ich h1 zuerst in einer Variablen habe, anstatt direkt hinzuschreiben?

Ich schick dir mal das ganze Skript:

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
ImageSelected = new Array (7);

for (var i=1; i <8; i++)
  ImageSelected[i] = 0;

h1 = new Image(); h1.src = "images/menu/ortslage_h.gif";
h2 = new Image(); h2.src = "images/menu/situationsplan_h.gif";
h3 = new Image(); h3.src = "images/menu/wohnungen_h.gif";
h4 = new Image(); h4.src = "images/menu/kurzbaubeschrieb_h.gif";
h5 = new Image(); h5.src = "images/menu/ausbau_h.gif";
h6 = new Image(); h6.src = "images/menu/allgemeines_h.gif";
h7 = new Image(); h7.src = "images/menu/kontakt_h.gif";

d1 = new Image(); d1.src = "images/menu/ortslage.gif";
d2 = new Image(); d2.src = "images/menu/situationsplan.gif";
d3 = new Image(); d3.src = "images/menu/wohnungen.gif";
d4 = new Image(); d4.src = "images/menu/kurzbaubeschrieb.gif";
d5 = new Image(); d5.src = "images/menu/ausbau.gif";
d6 = new Image(); d6.src = "images/menu/allgemeines.gif";
d7 = new Image(); d7.src = "images/menu/kontakt.gif";

function ChangeImage(Bildnr,Bildobjekt)
    {
if (ImageSelected[Bildnr]==0) {
    window.document.images["titel"+Bildnr].src = Bildobjekt.src;}
    }

function StartImage()
{
var uebergabe="";
   uebergabe=window.location.search;
        if (uebergabe!=""){
seite=uebergabe.slice(1);
ImageSelected[seite]==1;
bild="h"+seite;
window.document.images["titel"+seite].src = bild.src;
}
} //-->

</SCRIPT>

</HEAD>
<BODY  BGCOLOR="#FFFFFF" TEXT="#000000" ALINK="#FF0000" VLINK="#FF00FF" LINK="#0000FF" LEFTMARGIN="0" TOPMARGIN="0" MARGINHEIGHT=0 MARGINWIDTH=0 onload="StartImage()">

<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="700">

<TR VALIGN="TOP">
<TD><IMG SRC="images/general/logo_living.gif" WIDTH="188" HEIGHT="83" ALT="" BORDER="0"></TD>
<TD><IMG SRC="images/general/transparent.gif" WIDTH="108" HEIGHT="83" ALT="" BORDER="0"></TD>
<TD><IMG SRC="images/general/adress.gif" WIDTH="404" HEIGHT="83" ALT="" BORDER="0"></TD>
</TR>
<TR>
<TD COLSPAN=3><IMG SRC="images/general/schwarz.gif" WIDTH="700" HEIGHT="1" ALT="" BORDER="0"></TD>
</TR>
<TR>
<TD COLSPAN=3><IMG SRC="images/general/transparent.gif" WIDTH="700" HEIGHT="2" ALT="" BORDER="0"></TD>
</TR>
<TR VALIGN="TOP">
<TD HEIGHT="21" WIDTH="700" BGCOLOR="Black" COLSPAN=3>
  <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" VALIGN="TOP">
   <TR>
    <TD><A HREF="ortslage.shtml?1" ONMOUSEOVER="ChangeImage(1,h1)" ONMOUSEOUT="ChangeImage(1,d1)"><IMG SRC="images/menu/ortslage.gif" WIDTH="84" HEIGHT="21" ALT="" BORDER="0" name=titel1></A></TD>
    <TD><A HREF="situationsplan.shtml?2" ONMOUSEOVER="ChangeImage(2,h2)" ONMOUSEOUT="ChangeImage(2,d2)"><IMG SRC="images/menu/situationsplan.gif" WIDTH="100" HEIGHT="21" ALT="" BORDER="0" name=titel2></A></TD>
    <TD><A HREF="wohnungen.shtml" ONMOUSEOVER="ChangeImage(3,h3)" ONMOUSEOUT="ChangeImage(3,d3)"><IMG SRC="images/menu/wohnungen.gif" WIDTH="88" HEIGHT="21" ALT="" BORDER="0" name=titel3></A></TD>
    <TD><A HREF="kurzbaubeschrieb.shtml" ONMOUSEOVER="ChangeImage(4,h4)" ONMOUSEOUT="ChangeImage(4,d4)"><IMG SRC="images/menu/kurzbaubeschrieb.gif" WIDTH="124" HEIGHT="21" ALT="" BORDER="0" name=titel4></A></TD>
    <TD><A HREF="ausbau.shtml" ONMOUSEOVER="ChangeImage(5,h5)" ONMOUSEOUT="ChangeImage(5,d5)"><IMG SRC="images/menu/ausbau.gif" WIDTH="60" HEIGHT="21" ALT="" BORDER="0" name=titel5></A></TD>
    <TD><A HREF="allgemeines.shtml" ONMOUSEOVER="ChangeImage(6,h6)" ONMOUSEOUT="ChangeImage(6,d6)"><IMG SRC="images/menu/allgemeines.gif" WIDTH="90" HEIGHT="21" ALT="" BORDER="0" name=titel6></A></TD>
    <TD><A HREF="kontakt.shtml" ONMOUSEOVER="ChangeImage(7,h7)" ONMOUSEOUT="ChangeImage(7,d7)"><IMG SRC="images/menu/kontakt.gif" WIDTH="68" HEIGHT="21" ALT="" BORDER="0" name=titel7></A></TD>
    <TD><IMG SRC="images/general/transparent.gif" WIDTH="86" HEIGHT="21" ALT="" BORDER="0"></TD>
   </TR>
  </TABLE>
</TD>
</TR>
<TR>
<TD COLSPAN=3><IMG SRC="images/general/transparent.gif" WIDTH="700" HEIGHT="2" ALT="" BORDER="0"></TD>
</TR>
<TR>
<TD COLSPAN=3><IMG SRC="images/general/schwarz.gif" WIDTH="700" HEIGHT="1" ALT="" BORDER="0"></TD>
</TR>

</TABLE>

<script language="Javascript" src="scripts/standart.js"></script>

<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="700">
<TR ALIGN="left" VALIGN="top">

<TD BGCOLOR="99CCFF"><IMG SRC="images/general/transparent.gif" WIDTH="27" HEIGHT="352" ALT="" BORDER="0"></TD>  
<TD BGCOLOR="99CCFF" style="background-image:url(images/body/body\_bg.jpg); background-repeat:no-repeat;" WIDTH=618><BR><BR><BR>  

<P CLASS="textstartoben"><B>Die moderne Architektur und die grosszuegigen Grundrisse<BR>
setzen Ihrer Kreativitaet und Spontanitaet keine Grenzen<BR>
und die Preise lassen noch Platz<BR>
fuer weitere Wuensche...<BR><BR></B></P>
  <IMG SRC="images/body/bg_haus.gif" WIDTH="316" HEIGHT="149" ALT="" BORDER="0" ALIGN="right">
<P CLASS="textstartunten"><BR><BR><B>Projektbesichtigung.<BR>
Jeden Donnerstag von 16:00 bis 19:00 Uhr <BR>
sind wir imVerkaufsbuero vor Ort <BR>
(Ecke Rietmuehle/Talacher) fuer Sie da. <BR>
Zufahrt ab Zuercherstrasse signalisiert.</B></P></TD>
<TD WIDTH="33" BGCOLOR="99CCFF"><IMG SRC="images/body/logo_bindella.gif" WIDTH="33" HEIGHT="352" ALT="" BORDER="0"></TD>
<TD WIDTH=22 BGCOLOR="99CCFF"> </TD>
</TR>
</TABLE>

<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="700">
<TR>
<TD COLSPAN=2><IMG SRC="images/general/schwarz.gif" WIDTH="700" HEIGHT="1" ALT="" BORDER="0"></TD>
</TR>
<TR VALIGN="TOP">
<TD><IMG SRC="images/general/logo_mhs.gif" WIDTH="184" HEIGHT="37" ALT="" BORDER="0"></TD>
<TD><IMG SRC="images/general/transparent.gif" WIDTH="516" HEIGHT="37" ALT="" BORDER="0"></TD>
</TR>
</TABLE>

</BODY>
</HTML>

[Carsten]

Hi Landolt,

Was ist der Unterschied, wenn ich h1 zuerst in einer Variablen habe, anstatt direkt hinzuschreiben?

Du hast nicht h1 (Image-Objekt)  in der Variablen bild sondern "h1" (String).

Gruss,
Carsten

[Landolt]

Hallo Carsten

Wie schaffe ich es denn dies zu konvertieren, gibt es einen String to xy-Objekt?

» > Was ist der Unterschied, wenn ich h1 zuerst in einer Variablen habe, anstatt direkt hinzuschreiben?

Du hast nicht h1 (Image-Objekt)  in der Variablen bild sondern "h1" (String).

[Cheatah]

Hi,

Du hast nicht h1 (Image-Objekt)  in der Variablen bild sondern "h1" (String).

Wie schaffe ich es denn dies zu konvertieren, gibt es einen String to xy-Objekt?

http://www.teamone.de/selfaktuell/forum/messages/83896.html

Cheatah

[Carsten]

Hallo, Landolt!

konvertieren? watt willste da konvertieren? Einfach zuweisen.
<../../teba.htm#a1>, Schwierigkeitsgrad irgendwo zwischen Beispiel 1 und 2.

Gruss,
Carsten

[Landolt]

Ja hallo Jungs

Ich glaub es einfach nicht. Eben diese Zuweisung geht nicht!

Nochmals mein letzter Versuch euch dies zu beschreiben.
Mein untenstehendes Beispiel geht nicht. Was ich ja jetzt schon weiss ist das "bild" ein string ist, aber ich gerne dies als Objekt moechte. Ich koennte billig auch einfach einen Case of machen wo ich schreibe, wenn bild gleich xy, dann nehme bildobjekt xy. Dies waere aber sehr unschoen. Also wie mache ich nun aus dem string bild ein Bildobjekt mit dem Namen bild und dem Inhalt meiner Uebergabe?

var uebergabe="";
uebergabe=window.location.search;
if (uebergabe!="")
{
  seite=uebergabe.slice(1);
  ImageSelected[seite]==1;
  bild="h"+seite;
  window.document.images["titel"+seite].src = bild.src;
}

Ich habe mal das ganze auf folgende Adresse geschmissen:
http://www.strichpunkt.ch/living/ortslage.shtml

Eure anderen Tips habe ich natuerlich alle ausprobiert, wobei aber kein einziger geht.

Danke

[Carsten]

Hallo Landolt,

Ich glaub es einfach nicht.

du sagst es.

Eure anderen Tips habe ich natuerlich alle ausprobiert, wobei aber kein einziger geht.

hm... ein gewisses Eingeständniss eigener Verständnissprobleme könnte höflicher wirken.
Immerhin enthalten deine Postings alle den gleichen grundsätzlichen Programmfehler.
Du weist einander inkompatible Typen zu.
Inzwischen ist mir klar warum du das nicht wegmachen "konntest", nämlich weil unsere
Lösungsvorschläge die gewünschte Funktionalität mit weggemacht hätten - das war aber
aus deinen vereinfachten Codeschnipseln nicht so richtig zu erkennen.

Ok, also letzter Versuch:

h1 = new Image();
h1.src = "images/menu/ortslage_h.gif";
bild=h1;  // nur so geht es
window.document.images["titel"+seite].src = bild.src;

Das bringt dich für deine Aufgabe erstmal nicht weiter (in der URL kannst du nun mal nur einen
String übergeben, kein ImageOjekt), sollte aber das Problem mit den Daten-Typen klarmachen.

Für das was du vorhast brauchst nicht einen String to typ-xy Konverter sondern was, was dir String in
Quelltext umwandelt-zugegebenermassen eine der subtileren Umwandlungen.
Der String "h1" soll ja als Quelltext h1 interpretiert werden soll. Bei konstantem String kannst du
einfach die Anführungzeichen weglassen. (Das wäre für dein vereinfachtes Beispiel im Posting die Lösung
gewesen, auf die ich angespielt hatte.)

Um zusammengebaute Strings so zu behandlen, als ob sie im Quelltext stünden gibt es
eval(); <../../tecm.htm#a2>

also z.b.

t1="alert(";
t3=");";

eval(t1+"Hallo"+t3);

also

eval("Bildobjekt=h"+seite+";");

Gruss,
Carsten

PS: und verdrück heute abend beim Italiener nicht die Speisekarte sondern die Pizza ;)

[Landolt]

Danke es klappt. Ab nun werden eure Nerven geschont.

Immerhin enthalten deine Postings alle den gleichen grundsätzlichen Programmfehler.
Du weist einander inkompatible Typen zu.

Das wusste ich ja schon seit dem 2.Posting. Aber die Loesung kam ja erst jetzt :-)
Chetea kam ja schon vorher mit dem eval, aber er meinte ja dies brauche ich nicht.

Ok, also letzter Versuch:
eval("Bildobjekt=h"+seite+";");

Genau dies klappt!!

PS: und verdrück heute abend beim Italiener nicht die Speisekarte sondern die Pizza ;)

Ich esse auch nicht das Glas Bier, aber ich drinke auf dich. Bier ist unterwegs!!

[Cheatah]

Hi,

Chetea kam ja schon vorher mit dem eval, aber er meinte ja dies brauche ich nicht.

ich sagte, Du _möchtest_ das nicht benutzen, und verwies Dich auf Arrays. eval() sollte man nur(!) dann einsetzen, wenn man genau(!) weiß, was man tut. Da Du nicht von selbst auf diese Methode gekommen bist, bezweifele ich, daß diese Bedingung gegeben ist - benutze Arrays.

Cheatah

[Carsten]

Hi Cheatah,

... auf Arrays ...

*Stirnklatsch*  ... na klar, das isses.

Irgendwie hat der Hirn-interne Interpreter immer gleich bei der typ-fehlerhaften Zuweisung 'ne rot
blinkende Fehlermeldung ausgespuckt, da hab ich die eigentliche Aufgabe doch glatt aus den
Augen verloren.

naja... bei <84667.html> hats dann ja mal geklappt, mit dem richtigen weg... da hab ich ja
auch nicht zwischengepfuscht :(

Gruss,

Carsten

P.S. Landolt, falls du das noch liest: Für die Array Lösung müsstest du zwar etwas mehr an
deinem Code umschreiben, dafür wäre es kürzer und verständlicher. (Und irgendwie mehr
"richtig programmiert", nicht so gebastelt. )

[Landolt]

Nachtrag:

Dies funktioniert:

window.document.images["titel"+seite].src = h1.src;

Dies nicht:
seite=1;
var bild= "h"+seite+".src";
window.document.images["titel"+seite].src = bild;

Gibt es irgendwie einen String to irgendwas Konverter?

[Cheatah]

Hi,

seite=1;
var bild= "h"+seite+".src";
window.document.images["titel"+seite].src = bild;

gibt es in dem aktuellen Verzeichnis denn eine Grafik namens "h1.src"? Ist der Server so konfiguriert, daß er den richtigen MIME-Type für *.src zurückliefert?

Gibt es irgendwie einen String to irgendwas Konverter?

eval(), s. <../../tecm.htm#a2>. Das möchtest Du aber gar nicht verwenden, sondern ein Array. Glaub mir, das ist besser so.

Cheatah