[JS] Per Link Klick Bild austauschen?

[d3221]

Hey... ich, der JS Amateur, bins mal wieder

Ich hab zwar schon gegooglt aber alle Seiten waren irgendwie down -.-

Also ich würde gerne so 4 Links haben, und einen DIV Container. Bei einem Klick auf Link1 wird Bild1 in den Div geladen, bei Link2 Bild2 usw. Das jeder Link auf ein direktes Bild verlinkt was in dem Container dargestellt wird.

Hat da jemand einen Code zur Hand oder kann da jemand eben was posten? Wär sau nett

Denke mal ich komm erst gegen Sommer zu mich mal mit JS auseiannder zu setzen :/ Grade echt keine Zeit dazu Bitte um euer Verständnis Außerdem lernt man ja durch die geposten Sachen ja auch etwas Also ich zumindest weil ich mir den immer an schaue und guck wo was passiert - neugierde halt

Also danke schon mal

 

[cebito]

AW: [JS] Per Link Klick Bild austauschen?

Schau mal , wenn du den "schnickschnack" aussenrum weglässt ist es genau was du suchst

 

[sokie]

AW: [JS] Per Link Klick Bild austauschen?

<script type="text/javascript">
  function ladeBild(bild){
  document.getElementById("container").innerHTML = '<img src="' + bild + '" />';
}
</script>

<a href="javascript:ladeBild('adresse/der/bilddatei.png')">Text zum Bild</a>
<div id="container"></div>

 

[d3221]

AW: [JS] Per Link Klick Bild austauschen?

Danke sokie Einfach und genial ^_^

EDIT// Ich habe das jetzt versucht zu erweitern... Aber irgendwie will der das nicht machen
Kannst du da noch mal drüber schauen?

JS:

<script type="text/javascript">
  function loadheader(bild, bildname){
  document.getElementById("header").innerHTML = '<img src="' + bild + '" width="870px" height="285px" alt="" border="0" />';
  document.getElementById("" + bildname + "").innerHTML = 'test';
}
</script>

HTML:

<div id="bild1">
 <a href="javascript:loadheader('Bilder/start/bild1.jpg', 'bild1')">
  <img src="Bilder/stick.jpg" alt="Bildauswahl" border="0" />
 </a>
</div>

Also eigentlich müsste dann doch in DIV bild1 noch "test" dran hängen oder? Oder wie funktioniert das das man da noch was DRAN hängt und nicht komplett überschreibt? Weil momentan wird das "Bilder/stick.jpg" einfach mit "test" komplett überschrieben!

Also Ziel ist eben, dass nach der Auswahl so ein kleiner grafischer Pfeil unter eiener kleinen Grafik (auf denen die Links liegen) angezeigt werden soll nach dem Klick zum Bild laden.

 

[sokie]

AW: [JS] Per Link Klick Bild austauschen?

document.getElementById("" + bildname + "")... ist mehrfach unsinnig,und du wirst auch gleich verstehen warum.
document,getElementById() wählt aus der Seite das Element aus, dessen id du als zeichenkette in den klammern angibtst. Richtig erkannt bei document.getElementById("header").innerHTML = "...";
hier wird in dem container mit der id="header" der html inhalt manipuliert.
beim zweiten gibt es aber kein Element mit der id="bildname".

zur zweiten Frage, innerHTML="..." ünerschreibt/ersetzt den vorherigen (html)Inhalt des containers mit dem was hinter dem zuweisungsoperator(=) steht.

wenn du etws zu dem "innerHTML" im cotainer hinzufügen willst kannst du das mit += erreichen:

document.getElementById("header").innerHTML += "<br />dieser text wird angehängt";

vielleiht kannst du damit erstmal arbeiten

 

[d3221]

AW: [JS] Per Link Klick Bild austauschen?

beim zweiten gibt es aber kein Element mit der id="bildname".

doch doch. Ich habe ja das als zusätzliche Funktionsvariable hinzugefügt. Weil ich will haben, dass wenn ich eins anklicke, da die Grafik ausgetauscht wird und bei allen anderen deaktiviert wird. Ich habe das jetzt auch hinbekommen aber du wirst sicher die Hände über dem Kopf zusammen schlagen wenn du den Code siehst

Geht das auch einfacher (also es funktioniert! ):

<script type="text/javascript">
  function loadhead(bild, bildname){
  document.getElementById("header").innerHTML = '<img src="' + bild + '" width="870px" height="285px" alt="" border="0" />';



  // VIA Datenbank? (HP läuft eh mit einer DB - da macht eine Tabelle mehr auch nichts aus. Außerdem bessere Admin!)
  document.getElementById("bild1").innerHTML = '<a href="javascript:loadhead(\'Bilder/start/bild1.jpg\', \'bild1\')"><img src="Bilder/stick.jpg" alt="Bildauswahl" border="0" /></a>';
  document.getElementById("bild2").innerHTML = '<a href="javascript:loadhead(\'Bilder/start/bild2.jpg\', \'bild2\')"><img src="Bilder/stick.jpg" alt="Bildauswahl" border="0" /></a>';
  document.getElementById("bild3").innerHTML = '<a href="javascript:loadhead(\'Bilder/start/bild3.jpg\', \'bild3\')"><img src="Bilder/stick.jpg" alt="Bildauswahl" border="0" /></a>';

  document.getElementById("" + bildname + "").innerHTML = '<img src="Bilder/aktiv.jpg">';
}
</script>

Die ganzen bild1,bild2,bild3 Teile die fest drin stehen würde ich dann sowieso über eine DB holen. Deswegen wär da nicht so der Aufwand eins hinzuzufügen weil das eh alles dann dynamisch läuft. Oder kann man das auch eleganter lösen?

Dann noc eine Frage die für sokie wahrscheinlich wieder nur ein Klacks ist: Kann man die Bilder auch einfaden lassen und dann wenn man das nächste wählt wieder ausfaden und das nächste einfaden?

 

[sokie]

AW: [JS] Per Link Klick Bild austauschen?

hier hat du eine ziemlich umfangreiche Referenz für Javascript:
SELFHTML: JavaScript / JavaScript-Sprachelemente
SELFHTML: JavaScript / Objektreferenz
mit Beispielen und drum und dran.
und hier ein komplettes Buch
Galileo Computing :: JavaScript und AJAX