Seite 1 von 3

Bilder austauschen wie bei E-Bay?

Verfasst: Mo Jun 30, 2003 3:46 pm
von 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! ;) )?!

Verfasst: Mo Jun 30, 2003 5:57 pm
von 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 ^^

Verfasst: Mo Jun 30, 2003 5:59 pm
von AeternoS
Was ist der unterschied, wenn ich ne Funktion schreib?

Verfasst: Mo Jun 30, 2003 6:21 pm
von 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 '').

Verfasst: Di Jul 01, 2003 7:43 am
von 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! :D

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

Verfasst: Di Jul 01, 2003 8:31 am
von 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! :D

Verfasst: Di Jul 01, 2003 5:27 pm
von 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 ...

Verfasst: Mi Jul 02, 2003 7:17 am
von 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! :D

Vielleicht wirds hierdurch klarer:

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

Verfasst: Mi Jul 02, 2003 7:18 am
von 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! :D

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>

Verfasst: Mi Jul 02, 2003 7:19 am
von 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>

Verfasst: Mi Jul 02, 2003 7:20 am
von 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! :roll:

Verfasst: Mi Jul 02, 2003 7:31 am
von 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? :roll:

Verfasst: Mi Jul 02, 2003 8:10 am
von Katana
AeternoS hat geschrieben: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? :roll:
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;"

Verfasst: Mi Jul 02, 2003 9:57 am
von AeternoS
Hat geklappt! Danke! :D
War das mit den ""csout"" und ""csover"" und ""CSAction"" anbetrifft, war das jetzt verständlich, oder uninteressant?

Verfasst: Do Jul 03, 2003 8:16 am
von 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?