[martin_mt]

schau dir mal die grundlegenden ajax tutorials an .
statt dem text, der dort immer geladen wird, kannst du selbstverständlich auch bilder laden ...

[DarkAlucard]

Also "Div Tauschen" Beispiel:

<div id=div1><a href=java script:tauscheBild()>Hier steht ein Link</a></div>

<script>

function tauscheBild(){
var object = document.getElementById("div1");
var austausch = "Hier ist der neue Text, z.B. ein Bild: <img src='./test.jpg'>";
object.innerHTML= austausch;
}

</script>

der Rest sollte kein weiteres Problem sein


Achja das ist zwar nicht "schön" gecodet, aber es funktioniert

EDIT: ich weiß nicht wieso aber hier wird javascript als Wort automatisch getrennt, in <a href... bitte javascript ZUSAMMEN schreiben.

Dieser Beitrag wurde von DarkAlucard bearbeitet: 12. Januar 2010 - 11:13

[zwutz]

rein theoretisch nicht schwer, wenn du im Vorfeld weißt, welche Bilder wann kommen. Dann benötigst du kein AJAX, sondern nur eine simple JS-Funktion, wie sie DarkAlucard gepostet hat (auch wenn ich ehrlich gesagt auf innerHtml verzichten würde, aber das ist hier erstmal nicht wichtig)

Immer beachten: es gibt User ohne JS, stell für die also eine separate Galerie zur Verfügung.

Ohne AJAX:

<div id="div1"><img src="images/bild1.jpg" /></div>
<!-- im href der Link für die ohne JS, onclick für die mit JS.
 return false sorgt dafür, dass die href-Angabe ignoriert wird //-->
<a href="galerie.html" onclick="tauscheBild(); return false">Klick mich!</a>


<script>

function tauscheBild()
{
  // div "holen"
  var object = document.getElementById("div1");
  // und leeren, falls was drinstehen sollte
  while (object.hasChildNodes())
  {
	object.removeChild(object.firstChild);
  }

  // Bild-Knoten erzeugen
  var imgtag = document.createElement("img");
  var srcattr = document.createAttribut("src");
  srcattr.nodeValue = "images/bild2.jpg";
  imgtag.setAttributNode(srcattr);
  object.appendChild(imgtag);
}

</script>

damit wird das angzeigte bild1.jpg durch bild2.jpg ausgetauscht. Du kannst auch das aktuell angezeigte Bild ermitteln und daraufhin das nächste anzeigen


Etwas schwieriger wirds, wenn du die im Vorfeld nicht weißt, welches Bild hinkommen soll und die Auswahl einem php-Skript überlassen willst. Hierfür benötigst du AJAX oder zumindest etwas vergleichbares.
Aber das jetzt näher zu erläutern, ist mir ein wenig zu viel. Aber hier mal eine js-Datei, die im groben passen sollte. Was genau was macht, überlass ich dir

var resObjekt = null;
function tauscheBild()
{
  var object = document.getElementById("div1");
  if (object.hasChildNodes())
  {
	var altesBild = object.getElementsByTagName("img")[0].getAttribute("src");
	sndReq(altesBild);
	return;
  }
  
  sndReq("images/bild1.jpg");
}

function erzXMLHttpRequestObject()
{
	var resObjekt = null;
	try
	{
		resObjekt = new ActiveXObject("Microsoft.XMLHTTP");
	}
	catch(Error)
	{
		try
		{
			resObjekt = new ActiveXObject("MSXML2.XMLHTTP");
		}
		catch(Error)
		{
			try
			{
				resObjekt = new XMLHttpRequest();
			}
			catch(Error)
			{
				alert("Erzeugung des XMLHttpRequest-Objekts ist nicht möglich");
			}
		}
	}
	return resObjekt;
}

function sndReq(altesBild)
{
  resObjekt.open('get', 'bildloader.php?altesBild='+altesBild, true);
  resObjekt.onreadystatechange = handleResponse;
  resObjekt.send(null);
}

function handleResponse()
{
  if(resObjekt.readyState == 4)
  {
	// div "holen"
	var object = document.getElementById("div1");
	// und leeren, falls was drinstehen sollte
	while (object.hasChildNodes())
	{
	  object.removeChild(object.firstChild);
	}

	// Bild-Knoten erzeugen
	var imgtag = document.createElement("img");
	var srcattr = document.createAttribut("src");
	srcattr.nodeValue = resObjekt.responseText;
	imgtag.setAttributNode(srcattr);
	object.appendChild(imgtag);
	}
  }
}
resObjekt = erzXMLHttpRequestObject();

Aufruf bleibt gleich, die bildloader.php musst du selber basteln. Sie liefert anhand des parameters 'altesBild' das auf dieses Bild folgende

Alle Angaben ohne Gewähr, da ungetestet und unter Kaffeeentzug zusammengeschustert. Das Funktionsprinzip sollte aber klar sein

Für weitere Details empfehle ich entsprechende Lektüre respektive Tutorials

[Ludacris]

ich hab mir jetzt deinen code gerade nicht angesehen, aber so wie ich das verstehe will er eine bildergallerie im stil von den "fotos" auf facebook oder der gallerie hier.... sprich du klickst aufs bild, nächstes bild kommt, klickst drauf, nächstes bild kommt...
daher würde ich es so machen....

<div id=div1><a href=java script:tauscheBild()>Hier steht ein Link</a></div>

<script>

function tauscheBild(){
var object = document.getElementById("div1");
var austausch = "Hier ist der neue Text, z.B. ein Bild: <img src='./test'+i+'.jpg'>";
object.innerHTML= austausch;
i++;
}

</script>

Achtung! die variable i muss noch deklariert werden und ich hab momentan nicht im kopf wie das in js geht. auf jeden fall geht er so durch die bibliothek durch, fangt allerdings bei einem klick auf das bild bei bild 1 an und geht dann weiter auf bild 2...


(ich hoffe man versteht was ich meine)