Referenzierung

[Arne]

Hallo allerseits, ich kriegs einfach nicht hin  :-(

Also: In einem linken Kasten gibts im Hintergrund ein Bild, im Vordergrund kann optional Schrift sein:

<div class="ltextaufbild" style="background:url(../lbilder/lbild01.jpg) name='pic1'
  no-repeat;color:white;">Rhabarber</div>

Im rechten Kasten eine Thumbnailgalerie, die Bilder sind fortlaufend numeriert, funktioniert auch:

<div id="rkasten">
  <H3>Bildergalerie</H3>
  <div style="width:100%; height:200px; overflow:auto; border:0;">
    <script language="javascript">
    var numofimages = 10
    for (X=1;X<numofimages; X++) {
    document.write("<A HREF=Javascript:document.pic1.src=../lbilder/lbild0"+X+".JPG>")
    document.write("<IMG SRC=../lbilder/thumbs/lbild0"+X+".JPG
      width=75 height=68 vspace=10 hspace=10 border=0>")
    document.write("</A>")}
    </script>
  </div>

Der Knackpunkt ist die Referenzierung. Die Zeile <A HREF="..."> soll idealerweise das Hintergrundbild im linken Kasten wechseln ohne daß die Seite neu aufgebaut wird - und genau das klappert nicht.

(Zur Not würde auch das wechseln des Vordergrunds mit einem Bild reichen)

Ich hab im Netz gesucht, aber nix passendes gefunden und langsam gehen mir die Ideen aus... Kann jemand helfen??

Thanx. Groetjes  Arne (email ohne ng-)

[Steel]

Ok, was funktioniert denn an

getElementByID("Kasten")style.backgroundImage=url(background.jpg)

nicht?
(Natuerlich solltest Du dem Div noch die nette ID "Kasten" geben)

[Arne]

so?

<div id="pic1" class="ltextaufbild" style="background:url(../lbilder/lbild01.jpg) no-repeat;color:white;" >Jollensegeln im Winter</div>

<div id="rkasten">
<H3>Bildergalerie</H3>
<div style="width:100%; height:200px; overflow:auto; border:0;">
    <script language="javascript">
    var numofimages = 10
    for (X=1;X<numofimages; X++) {
    document.write("<A HREF=javascript:getElementByID('pic1')style.backgroundImage=url(../lbilder/lbild02.jpg)>")
    document.write("<IMG class=schatten SRC=../lbilder/lbild0"+X+".jpg width=75 height=68 vspace=10 hspace=10 border=0>")
    document.write("</A>")}
   </script>
</div>

funktioniert nicht. Ich weiß, ich hab keine Ahnung von JS. Wo ist der Fehler??

Thanx4help
   email ohne ng-
      Arne

[planB]

hallo,

<div class="ltextaufbild" style="background:url(../lbilder/lbild01.jpg) name='pic1'
  no-repeat;color:white;">Rhabarber</div>

eine Eigenschaft "name" gibt es hier nicht: http://de.selfhtml.org/javascript/objekte/style.htm#style_eigenschaften

document.write("<A HREF=Javascript:document.pic1.src=../lbilder/lbild0"+X+".JPG>")

hier sprichst du die Liste document.images an. Dazu gehören aber keine Hintergrundbilder.

... das Hintergrundbild im linken Kasten wechseln ohne daß die Seite neu aufgebaut wird

dann brauchst du auch keinen Link, sondern du nur die Clicks auf deine Thumbs überwachen

<img src="thumbs/bild.jpg" onclick="wechsel_bgimg('bild.jpg')" alt="">

wie die Funktion arbeiten könnte, hat Steel schon angedeutet

Gruß planB

[Arne]

Hey planB und Steel,

könntet Ihr Euch bitte mal per mail bei mir melden? Email ohne ng-

Ich kriegs nämlich nicht hin. Ich hab einfach die Erfahrung nicht. Und jeden den ich bislang angehauen habe, kam mit wunderbaren PHP-Lösungen oder Thumbnail-Listen. Ich will keine Thumbnailliste sondern ein Script. Und mit den diversen Anführungszeichen stehe ich auch auf Kriegsfuß - wo kann man sowas richtig lernen?

Vielleicht wars hier auch zu abstrakt, und die Antworten für mich waren es dann auch. Bitte gebt mal laut, ich komm irgendwie nicht weiter. Link steht oben.

Thanx! Arne

[planB]

hallo,

könntet Ihr Euch bitte mal per mail bei mir melden?

das halte ich für keine gute Idee. Warum willst du auf die verschiedenen Vorschläge hier aus dem Forum verzichten?

Wenn ich mir jetzt deine Seite angucke, muss ich leider sagen, dass du kaum einen Vorschlag beherzigt hast, das finde ich wenig motivierend.

Ich kriegs nämlich nicht hin. Ich hab einfach die Erfahrung nicht.

deswegen ist es etwas verwegen zu glauben, du könntest mit einer genialen Anweisung im javascript:-Link dein Problem lösen, nutze dafür lieber eine Funktion, in die du Kontrollabfragen einbauen kannst.

Und mit den diversen Anführungszeichen stehe ich auch auf Kriegsfuß - wo kann man sowas richtig lernen?

mein Grundwissen habe ich mir in der SELFHTML-Doku angeeignet. Startpunkt meiner Navigation ist dann http://de.selfhtml.org/javascript/index.htm@title=JavaScript/DOM

<http://de.selfhtml.org/javascript/sprache/notationen.htm@title=Steuerzeichen und besondere Notationen>
http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id@title=document.getElementById

hier noch ein paar Hilfen:

auf das <a href=javascript:....>...   verzichten und statt dessen dem Image die onclick-Überwachung geben:

document.write("<img src=\"thumbs/bild.jpg\" onclick=\"wechsel_bgimg('bild.jpg')\" alt=\"\">");  

und schrittweise diese Funktion mit den einzelnen Anweisungen austesten. Ich hoffe, du nutzt FF oder Opera, um deine Scripte zu entwickeln, und kontrollierst die Fehlerkonsolen ...

function wechsel_bgimg(bild_url) {  
  
 alert("bild_url: "+bild_url);  
  
  // dann Referenz auf das <div id="pic1">   holen, z.B.  
  var div_pic1= ...  
  
 // nachgucken, was ist das alte Hintergrundbild?  
  
  // alert("altes Hintergrundbild:\n" + div_pic1.style.backgroundImage);  
  
  // dann neues Hintergrundbild zuweisen ....  
  
 }

... und beherzigst doch noch die Hinweise von rob.

bin gespannt, wie weit du beim nächsten Posting gekommen bist.

Gruß planB

[Arne]

Hey planB, ganz schön gemein, mich so auszusetzen...

Die onclick-Variante hat den Nachteil, daß beim Überfahren mit der Maus keine Hand mehr erscheint (was muß man an onmouseover dranhängen damit das Mauslogo wie bei <A> wechselt?)

<script language="javascript">
 function wechsel_bgimg(bild_url) {
 var div_pic1=pic1;
 alert("alt: "+ pic1.style.backgroundImage);
// alert("alt: "+ div_pic1.style.backgroundImage);
// alert("neu: "+ bild_url);
 }
 var numofimages = 10
 for (X=1;X<numofimages; X++) {
 document.write("<img src="../lbilder/lbild0"+X+".jpg" onclick="wechsel_bgimg('../lbilder/lbild0"+X+".jpg')" alt="">");}
 </script>

Soweit in IE6, Op9 und Fx2 sogut. Erstes und zweites Alert liefern die absolute url des Bildes [alt: url("file://localhost/D:/HTML/HOMEPAGES/LN3/lbilder/lbild01.jpg")], das dritte dagegen die relative [neu: ../lbilder/lbild06.jpg].

Wie weise ich jetzt die div_pic1.style.backgroundImage die neue bild_url zu?

Thanx4help&Geduld!  Arne
(email ohne ng-)

[Arne]

Nochwas: Ich sehe gerade, daß die Browser unterschiedlich reagieren!

Hier nochmal der Code:

<div id="pic1" class="ltextaufbild" style="background:url(../lbilder/lbild01.jpg) no-repeat;color:white;" >Jollensegeln im Winter</div>

<div style="width:100%; height:200px; overflow:auto; border:0;">
 <script language="javascript">
 function wechsel_bgimg(bild_url) {
 var div_pic1=pic1;
// alert("alt: "+ pic1.style.backgroundImage);
// alert("alt: "+ div_pic1.style.backgroundImage);
 alert("neu: "+ bild_url);
 }
 var numofimages = 10
 for (X=1;X<numofimages; X++) {
 document.write("<img src="../lbilder/lbild0"+X+".jpg" onclick="wechsel_bgimg('../lbilder/lbild0"+X+".jpg')" alt="">");}
 </script>
</div>

Beim 1. und 2. alert
Op9  alt: url("file://localhost/D:/HTML/HOMEPAGES/LN3/lbilder/lbild01.jpg")
IE6  alt: url(../lbilder/lbild01.jpg)

Beim 3. alert gibts
Op9  neu: ../lbilder/lbild07.jpg
IE6  neu: ../lbilder/lbild07.jpg

Bei Firefox2 gibts gar keine Reaktion, die Fehlerkonsole meldet: Pic1 not defined.

Und nun? Oh Mann, auf was hab ich mich da eingelassen...

Thanx4help.   Arne

[Struppi]

<div style="width:100%; height:200px; overflow:auto; border:0;">
<script language="javascript">

Du hast nicht in selfhtml geschaut? Und nicht was dir die Leute geschrieben haben?
https://forum.selfhtml.org/?t=151635&m=986557

function wechsel_bgimg(bild_url) {
var div_pic1=pic1;

pic1 existiert nicht, um ein Element im Dokument zu ermitteln brauchst du eine der getElement... Funktionen.

var numofimages = 10

auch hier hat dir rob bereits einen Tipp gegeben.

for (X=1;X<numofimages; X++) {

Das ist in mehrere Hinsicht unschön - aber nicht falsch.
üblicherwiese hat man sich daran gewöhnt Schleifenvariabeln mit i (increase - erhöhen) zu benennen
Globale (Schleifen)Variabeln sind ein Zeichen von schlechten Stil.
Großbuchstaben sollten nur für Konstanten verwendet werden.
und der Lesbarkeit wegen, ein paar Leerzeichen einfügen wäre auch nicht schlecht.

Also etwa so:

for (var i = 1; i < numofimages; i++) {

document.write("<img src="../lbilder/lbild0"+X+".jpg" onclick="wechsel_bgimg('../lbilder/lbild0"+X+".jpg')" alt="">");}

du kannst den Code auch etwas lesbarer machen:
document.write('<img src="../lbilder/lbild0' + i

• '.jpg" onclick="wechsel_bgimg(this.src)" alt="">')

this ist die Referenz auf das Element wo der Klick stattfindet.

Op9  alt: url("file://localhost/D:/HTML/HOMEPAGES/LN3/lbilder/lbild01.jpg")
IE6  alt: url(../lbilder/lbild01.jpg)

Beim 3. alert gibts
Op9  neu: ../lbilder/lbild07.jpg
IE6  neu: ../lbilder/lbild07.jpg

Das die Browser hier unterschiedliche Werte ausgeben ist nicht schlimm sie meinen alles das Gleiche.

Bei Firefox2 gibts gar keine Reaktion, die Fehlerkonsole meldet: Pic1 not defined.

Sag ich doch.

Struppi.

[Arne]

Hey Struppi,

ich werde robs Anregungen gerne umsetzen, ich will aber erstmal das Problem lösen, kannst Du das verstehen?

pic1 existiert nicht, um ein Element im Dokument zu ermitteln brauchst du eine der getElement... Funktionen.

aha, das mag für einen Eingeweihten erhellend sein, mir hilft das nicht da ich keine Erfahrung habe. Ich sehe ja ein, daß ich hier keinen fertigen Quellcode erwarten darf, aber ich hab von JS keine Ahnung, also rede bitte mit mir so, daß ich weiß wie ich weiter machen soll. Was soll ich wo reinschreiben?

Das ist in mehrere Hinsicht unschön - aber nicht falsch.

unschön, mag sein, aber funktioniert. Wenigstens das.

üblicherwiese hat man sich daran gewöhnt Schleifenvariabeln mit i (increase - erhöhen) zu benennen
Globale (Schleifen)Variabeln sind ein Zeichen von schlechten Stil.
Großbuchstaben sollten nur für Konstanten verwendet werden.
und der Lesbarkeit wegen, ein paar Leerzeichen einfügen wäre auch

nicht schlecht.

gern, aber mir wärs recht, wenn ich das Problem vom Tisch bekäme, dann opfere ich soviele Leerzeichen wie ich auf meiner Tastatur finden kann.

for (var i = 1; i < numofimages; i++) {

du kannst den Code auch etwas lesbarer machen:
document.write('<img src="../lbilder/lbild0' + i

• '.jpg" onclick="wechsel_bgimg(this.src)" alt="">')

erledigt. Sowas in der Richtung hatte ich doch zuvor, oder?

Bei Firefox2 gibts gar keine Reaktion, die Fehlerkonsole meldet: Pic1 not defined.
Sag ich doch.

Danke. Wie stelle ich das konkret ab?

Wie gehts nun weiter?

<div id="pic1" style="background:url(../lbilder/lbild01.jpg) no-repeat;color:white;" >Jollensegeln im Winter</div>

<div id="rkasten">

<H3>Bildergalerie</H3>
<div style="width:100%; height:200px; overflow:auto; border:0;">
 <script type="text/javascript">
 function wechsel_bgimg(this.src) {
 var div_pic1=pic1;
// alert("alt: "+ pic1.style.backgroundImage);
// alert("alt: "+ div_pic1.style.backgroundImage);
 alert("neu: "+ this.src);
 }
 var numofimages = 10;
 for (var i = 1; i < numofimages; i++) {
 document.write('<img src="../lbilder/lbild0' + i + '.jpg" onclick="wechsel_bgimg(this.src)" alt="">')
 </script>
</div>

Thanx4help&Geduld  Arne

[Struppi]

ich werde robs Anregungen gerne umsetzen, ich will aber erstmal das Problem lösen, kannst Du das verstehen?

Bedingt, da es nur um Kleinigkeiten ging (die du ja auch mittlerweile umgesetzt hast), es macht aber keinen Sinn jemanden zu helfen der sinnvolle Ratschläge ignoriert.

pic1 existiert nicht, um ein Element im Dokument zu ermitteln brauchst du eine der getElement... Funktionen.

aha, das mag für einen Eingeweihten erhellend sein, mir hilft das nicht da ich keine Erfahrung habe. Ich sehe ja ein, daß ich hier keinen fertigen Quellcode erwarten darf, ...

Meines Wissens ist auf der verlinkten Seite Quellcode, oder?

Bei Firefox2 gibts gar keine Reaktion, die Fehlerkonsole meldet: Pic1 not defined.
Sag ich doch.

Danke. Wie stelle ich das konkret ab?

Genau wie auf selfhtml beschrieben.

<script type="text/javascript">
function wechsel_bgimg(this.src) {

Das ist Quatsch, hier solltest und brauchst du auch nichts zu verändern.

Tut mir leid, aber wie Funktionen und deren Parameter definiert werden sind absolute Grundlagen, dass jetzt hier zu erklären führt zu weit, genau dafür gibt es selfhtml.

Struppi.

[palnB]

Hallo,

Die onclick-Variante hat den Nachteil, daß beim Überfahren mit der Maus keine Hand mehr erscheint (was muß man an onmouseover dranhängen damit das Mauslogo wie bei <A> wechselt?)

na gut - dann erst die Styles für deine Vorschaubilder. Alle Nachfahrenbilder in <div id="rkasten"> so formatieren:

<style type="text/css">

  
#rkasten img { /* (warning:) hier ist das _;_ unverzichtbar! */  
 width:75px;  
 height:68px;  
 border:0;  
 margin:10px;  
 cursor:pointer; /* siehe [ref:self812;css/eigenschaften/anzeigefenster.htm#cursor@title=cursor] */  
 }  

</style>

mit dieser Schleife werden die Thumbs oder Bilder innerhalb von <div id="rkasten"> eingetragen.

var numofimages = 10;  
for (i=1; i < numofimages; i++) {  
  document.write('<img src="../lbilder/lbild0' + i  
  + '.jpg" onclick="wechsel_bgimg(this.src)" alt="">')  
 }

Wie du wahrscheinlich inzwischen gemerkt hast, führen 10 Minuten Doku lesen eher zum Ziel als 2 Stunden rumtesten. <http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id @title=document.getElementById>

function wechsel_bgimg(bild_url) {  
  
  var div_pic1=document.getElementById("pic1");  
  
  if ( ! div_pic1) {  
    alert("Element mit id='pic1' fehlt");  
    }  
  else {  
    alert("altes bg_image:\n"+ div_pic1.style.backgroundImage);  
    // bild_url = bild_url.replace("thumbs/","");  
    div_pic1.style.backgroundImage='url("' + bild_url + '")';  
    alert("neues bg_image:\n"+ div_pic1.style.backgroundImage);  
    }  
  }

falls du doch wieder mit echten Thumbs arbeiten wirst, wie im Anfangspost geschrieben, wird die bild_url auf einen neuen Pfad gesetzt (momentan auskommentiert).

hoffe jetzt sind alle Klarheiten beseitigt ...  ;-)

Gruß planB

[rob]

Hi!

Die Frage wurde ja jetzt schon beantwortet.
Also noch ein paar Anmerkungen zum Code:
Dein Code ist an einigen Stellen zwar nicht falsch, aber trotzdem recht unschön.

<div id="rkasten">
<H3>Bildergalerie</H3>

Warum schreibst du deine Tags mal vollständig klein und dann wieder vollständig in Großbuchstaben?
In HTML spielt das (anders als in XHTML) zwar keine Rolle, ist aber unschön.

<script language="javascript">

Das language-Attribut ist deprecated.
Nutze <script type="text/javascript">.

var numofimages = 10

Ich würde das mit einem Semikolon beenden.
In JS ist das zwar nicht zwingend notwendig, in anderen Sprachen aber schon.
Du vermeidest Fehler, wenn du dir angewöhnst jede Zeile mit einem Semikolon zu beenden. Ist auch einfach schönerer Code.
Wenn du in größeren Projekten arbeitest, wird es sicherlich auch bestimmte Coding-Style-Vorgaben geben...

document.write("<A HREF=Javascript:document.pic1.src=../lbilder/lbild0"+X+".JPG>")

Attributwerte würde ich immer in Anführungszeichen setzen.
Dateinamen würde ich immer klein schreiben. Damit vermeidest du, daß es mal zu Problemen kommt, wenn du die Files auf einen Server mit casesensitivem Dateisystem lädst.

document.write("<IMG SRC=../lbilder/thumbs/lbild0"+X+".JPG
      width=75 height=68 vspace=10 hspace=10 border=0>")

Das Imagetag erfordert zwingend das Attribut alt.
Du kannst dieses leer lassen, aber nicht weglassen, wenn du gültigen Code schreiben willst.
Die Abstände würde ich übrigens mit CSS setzen.
vspace, hspace und border sind in der Strict-Variante von HTML übrigens nicht zugelassen.

Schöner Gruß,
rob

[Arne]

Nur ein kurzer Dank an planB, Steel, rob und Struppi für Eure Geduld.
Und an Gsicht auf http://xhtmlforum.de/javascript-ajax

Wers mal sehen möchte - s.o.

Ich finde: sieht gut aus  :-)

Gruß  Arne

[rob]

Hi!

Wers mal sehen möchte - s.o.

http://www.uitg.de/LN3/texte/text61.php nehme ich an?
Tja. Dann hast du das mit deinem Script jetzt wohl hinbekommen. Glückwunsch.
Aber trotzdem sind da noch einige Fehler auf deiner Seite, die du korrigieren solltest.

<script src="../js-pop.js"></script>

Das Attribut type ist zwingend erforderlich und darf nicht weggelassen werden.
Du hast zwar folgenden Meta-Tag gesetzt:
<meta http-equiv="content-script-type" content="text/javascript">
Aber dennoch erfordert das Script-Tag das type-Attribut, wenn du validen Code haben möchtest.

<STYLE></STYLE>

Welchen Zweck soll das haben?
Das ist nicht nur sinnlos, sondern auch noch falsch.
Das Style-Tag erfordert zwingend das type-Attribut.
Jeder Validator müsste dir hier einen Fehler anzeigen.
Folgendes wäre syntaktisch korrekt (aber natürlich trotzdem noch überflüssig):
<style type="text/css"></style>

<IMG SRC="../logo.jpg">

Das Image-Tag erfordert zwingend das alt-Attribut.
Du kannst dieses leer lassen, aber in keinem Fall weglassen.
Vom leer lassen würde ich dir aber stark abraten.
Bedenke, daß es User gibt, die mit Textbrowsern oder Screenreadern unterwegs sind.
Und dann gibt es noch einige User, die die Anzeige von Bildern deaktiviert haben und vielleicht nur ausgewählte Bilder nachladen, weil sie eine langsame Internetanbindung haben oder vielleicht mit einem Handy surfen und Bandbreite sparen möchten oder sonstwas.
In jedem Fall sind aussagekräftige alt-Texte sehr wichtig.

document.write('<img class=schatten src="../lbilder/lbild0' + i + '.jpg" alt="" width=65 height=59 vspace=10 hspace=15 border=0>')

Wie ich bereits schon mal geschrieben habe, solltest du alle Attributwerte in Anführungszeichen setzen.
In HTML ist es (im Gegensatz zu XHTML) zwar erlaubt, die Quotes wegzulassen, aber es ist kein guter Stil.
Gleiches gilt für die Vermischung von Groß- und Kleinschreibung.
In XHTML ist es vorgeschrieben, daß alle Tags und Attribute klein geschrieben werden müssen.
In HTML darfst du deine Tags zwar groß schreiben, aber trotzdem würde ich davon abraten.
Ich würde dir die durchgehende Kleinschreibung empfehlen.
Wenn man schon die Strict-Variante von HTML 4.01 einsetzt, sollte man auch ein wenig mehr auf guten Stil achten, finde ich.

<meta name="description"  content="Arne's Homepage">
<meta name="keywords"  content="Arne, Goerndt">

Welchen Sinn sollen diese Meta-Tags haben?
Wenn du diese beiden Metatags schon einsetzt, dann solltest du auch eine wirklich sinnvolle Beschreibung und sinnvolle Keywords einsetzen.

Desweiteren sehe ich auf deiner Site das, was man Divitis nennt.

Und wenn ich mir die CSS-Datei ansehe, fallen mir auch noch einige Dinge auf:

/* <meta http-equiv="content-style-type" content="text/css"> */
/* <link rel=stylesheet href="index.css"> */
/* <STYLE></STYLE> */

Diese drei Zeilen hast du zwar auskommentiert, aber trotzdem haben HTML-Tags nichts in einer CSS-Datei zu suchen.
Es ist natürlich nicht falsch, da es sich hier nur um einen Kommentar handelt.
Aber ich frage mich trotzdem, was das dort soll...

font:normal 12px Verdana;

Was ist, wenn die Verdana bei einem User nicht installiert sein sollte?
Ich würde Alternativ-Schriften angeben.
Und in jedem Fall sollte als letztes immer eine generische Schriftfamilie angegeben werden, z.B.:
font-family: verdana, sans-serif;

Dann wäre noch zu erwähnen, daß du auch immer eine Vordergrundfarbe angeben solltest, wenn du eine Angabe zur Hintergrundfarbe machst - und umgekehrt.
Eventuell hat ein User andere Default-Einstellungen in seinem Browser als du...

Schöner Gruß,
rob