Bilder austauschen wie bei E-Bay?

[AeternoS]

Gibt es ein Script, mit dem man Bilder auf einer Seite per klick austauschen kann, ohne dass eine komplette Seite neu geladen wird?
So wie bei E-Bay z.B.
Und wo bekomm ich das (möglicherweiße mit Anleitung! )?!

[Katana]

Ganz simples Javascript.
Du gibst dem großen Image einfach eine ID, zum Beispiel so:

Code: Alles auswählen

<img id="gross" src="http://.../bild.png" alt="hier bild" />

und kannst dann bei 'nem onclick auf ein anderes Bild folgendes reinschreiben:

Code: Alles auswählen

<img ... onclick="document.getElementById('gross').src = 'URL des neuen Bildes';" />

und das war's im groben schon.
Kannst dir natürlich auch 'ne Funktion schreiben, der du die neue URL übergibst und die dann das alte Bild austauscht.

Alles verstanden? Wenn nicht, nochma fragen ^^

[AeternoS]

Was ist der unterschied, wenn ich ne Funktion schreib?

[Katana]

Der Code wird übersichtlicher.
Als funktion schreibste dann z.B.

Code: Alles auswählen

<script type="text/javascript">
exchangePic(url) {
    document.getElementById('gross').src = url;
}
</script>

und brauchst nacher nur noch

Code: Alles auswählen

<img ... onclick="exchangePic('http://.../bild.png');" />

schreiben.

Kannst natürlich auch die id an die Funktion übergeben. Würde dann so aussehen:

Code: Alles auswählen

<script type="text/javascript">
exchangePic(id, url) {
    document.getElementById(id).src = url;
}
</script>

Im HTML:

Code: Alles auswählen

<img ... onclick="exchangePic('gross', 'http://.../bild.png');" />

'gross' als id ist natürlich nur ein Beispiel, kannst einen beliebigen Text oder Zahlen verwenden (allerdings auch die Zahlen in '').

[AeternoS]

Wow! Machst du das beruflich?
Die Beispiele mit der Funktion gehen aber irgendwie nich. Ich bekomm immer ""Fehler auf der Seite"" angezeigt.
Liegt irgendwie am header-Teil. Wenn ich den rauslösche ist es okay.
Habs jetzt mal mit dem ersten Beispiel gemacht. Da geht es. Ist zwar nicht so schön, erfüllt aber seinen zweck!
DANKE!

Jetzt muß ich nur noch rausfinden, wie ich bei der Miniatur noch ein RollOver mach!

[AeternoS]

Okay, das mir dem RollOver hab ich hinbekommen!
Ich denke, dass ich nicht der einzige bin, den es interessiert, deswegen hier mal der Code:

Code: Alles auswählen

<img src="beispiel.gif" width="50" height="30" border="0" name="beispiel"
style={cursor:hand} onmouseover="CSAction(new Array(/*CMP*/'miniatur_over'));return true;" csover="miniatur_over" 
onmouseout="CSAction(new Array(/*CMP*/'miniatur_normal'));" csout="miniatur_normal" onclick="document.getElementById('id').src = 'beispiel2.gif';" />

Der Cursor wird auch zur hand, wenn man über das Bild geht!

[Katana]

Was soll das mit ""csout"" und ""csover"" ?
Die Attribute gibt's beim img-Tag nicht und was ""CSAction"" macht, ist mir auch ein rätsel ...

[AeternoS]

Weiß ich auch nicht so genau. Ist im Head Beriech so angegeben und so.
Das ganze ist auch nicht von mir. Ich habs nur etwas modifiziert und eben dank dir das ganze so umgepopelt, dass die Bilder ausgetauscht werden ohne die komplette Seite neu zu laden!

Vielleicht wirds hierdurch klarer:

[Edit]Mist! War zu lang! [/Edit]

[AeternoS]

Weiß ich auch nicht so genau. Ist im Head Beriech so angegeben und so.
Das ganze ist auch nicht von mir. Ich habs nur etwas modifiziert und eben dank dir das ganze so umgepopelt, dass die Bilder ausgetauscht werden ohne die komplette Seite neu zu laden!

Vielleicht wirds hierdurch klarer:

Code: Alles auswählen

<link rel="stylesheet" type="text/css" href="style.css">
		<csactions>
			<csaction name="miniatur1_over" class="Set Image URL" type="onevent" val0="front" val1="miniatur1_over.gif">
			<csaction name="miniatur1" class="Set Image URL" type="onevent" val0="front" val1miniatur1.gif">
			<csaction name="miniatur2_over" class="Set Image URL" type="onevent" val0="seite" val1="miniatur2_over.gif">
			<csaction name="miniatur2" class="Set Image URL" type="onevent" val0="seite" val1="miniatur2.gif">
			</csactions>

[AeternoS]

Code: Alles auswählen

<csscriptdict>
<script><!--
CSStopExecution = false;
function CSAction(array) { 
	return CSAction2(CSAct, array);
}
function CSAction2(fct, array) { 
	var result;
	for (var i=0;i<array.length;i++) {
		if(CSStopExecution) return false; 
		var actArray = fct[array[i]];
		if(actArray == null) return false; 
		var tempArray = new Array;
		for(var j=1;j<actArray.length;j++) {
			if((actArray[j] != null) && (typeof(actArray[j]) == "object") && (actArray[j].length == 2)) {
				if(actArray[j][0] == "VAR") {
					tempArray[j] = CSStateArray[actArray[j][1]];
				}
				else {
					if(actArray[j][0] == "ACT") {
						tempArray[j] = CSAction(new Array(new String(actArray[j][1])));
					}
				else
					tempArray[j] = actArray[j];
				}
			}
			else
				tempArray[j] = actArray[j];
		}			
		result = actArray[0](tempArray);
	}
	return result;
}
CSAct = new Object;

CSAg = window.navigator.userAgent; CSBVers = parseInt(CSAg.charAt(CSAg.indexOf("/")+1),10);
function IsIE() { return CSAg.indexOf("MSIE") > 0;}
function CSIEStyl(s) { return document.all.tags("div")[s].style; }
function CSNSStyl(s) { return CSFindElement(s,0); }
function CSFindElement(n,ly) { if (CSBVers < 4) return document[n];
	var curDoc = ly ? ly.document : document; var elem = curDoc[n];
	if (!elem) { for (var i=0;i<curDoc.layers.length;i++) {
		elem = CSFindElement(n,curDoc.layers[i]); if (elem) return elem; }}
	return elem;
}

function CSSetImageURL(action) {
	var img = null;
	if (document.images) {
		if (!IsIE()) img = CSFindElement(action[1],0);
		else img = document.images[action[1]];
		if (img) img.src = action[2];
	}
}

// --></script>
</csscriptdict>

[AeternoS]

Code: Alles auswählen

<csactiondict>
<script><!--
CSAct[/*CMP*/ 'miniatur1_over'] = new Array(CSSetImageURL,/*CMP*/ 'name1',/*URL*/ 'miniatur1_over.gif');
CSAct[/*CMP*/ 'miniatur1'] = new Array(CSSetImageURL,/*CMP*/ 'name1',/*URL*/ 'miniatur1.gif');
CSAct[/*CMP*/ 'miniatur2_over'] = new Array(CSSetImageURL,/*CMP*/ 'name2',/*URL*/ 'miniatur2_over.gif');
CSAct[/*CMP*/ 'miniatur2'] = new Array(CSSetImageURL,/*CMP*/ 'name2',/*URL*/ 'miniatur2.gif');
CSAct[/*CMP*/ 'miniatur3_over'] = new Array(CSSetImageURL,/*CMP*/ 'name3',/*URL*/ 'miniatur3_over.gif');
CSAct[/*CMP*/ 'miniatur3'] = new Array(CSSetImageURL,/*CMP*/ 'name3',/*URL*/ 'miniatur3.gif');
// --></script>
</csactiondict>

Das ist der Head-Bereich. Ich hab einfach mal alles reinkopiert und es so abgeändert, dass es rein theoretisch zu den änderungen vom ersten, die ich gemacht hab zusammenpasst.
Ich hab mich nicht großartig mit dem Script auseinandergesetzt, da mir leider momentan die Zeit für sowas fehlt und ich nur das nötigste daran machen (bzw. ändern) kann/konnte und kann dir somit auch leider nicht sagen wie was und warum aber ich denke das bekommst du sowieso selber raus!
Hoffe mal, dass es weiter hilft!

[AeternoS]

Das einzige, was mich jetzt noch interessieren würde:

Ich habe doch den Tag

Code: Alles auswählen

style={cursor:hand}

hinzugefügt, damit sich der Cursor bei mouseOver zur Hand verändert. Leider geht das nur beim IE und nicht bei NetScape. Gibt es ne lösung?

[Katana]

Das einzige, was mich jetzt noch interessieren würde:

Ich habe doch den Tag

Code: Alles auswählen

style={cursor:hand}

hinzugefügt, damit sich der Cursor bei mouseOver zur Hand verändert. Leider geht das nur beim IE und nicht bei NetScape. Gibt es ne lösung?

Versuch mal

Code: Alles auswählen

style="cursor: hand;"

sollte zumindest in Mozilla funktionieren und somit eigendlich auch in Netscape.

*edit*:

Sorry, nicht

Code: Alles auswählen

style="cursor: hand;"

sondern

Code: Alles auswählen

style="cursor: pointer;"

[AeternoS]

Hat geklappt! Danke!
War das mit den ""csout"" und ""csover"" und ""CSAction"" anbetrifft, war das jetzt verständlich, oder uninteressant?

[AeternoS]

Okay, noch ein Problem. Ich hab keine Ahnung, ob das überhaupt möglich ist und es wird auch bestimmt nicht leicht sein, aber deshalb frag ich ja:

Ist es möglich, das große Bild auf klick auszutauschen (bis dahin ja kein Problem) ihm dann aber zu sagen, dass es auf erneuten klick durch ein wieder anderes Bild ausgetauscht werden soll, und so weiter??
Vielleicht zum Schluss beim letzten Bild dann sogar eine neue Seite laden?