Auswahlbuttons => je nach Komination verändern sich Inhal

-TS-design

moin zusammen...

ich würde gerne wissen wie ich sowas hier in der art programmieren kann:

dort hab ich 2 spalten mit auswahlbuttons, klicke ich in der ersten einen an, so wird das dazugehörige bild gezeigt.

klicke ich in der zweiten einen an, so wirs auch hier das dazugehörige bild gezeigt UND ein text für die Kombination aus genau diesen beiden buttons wird gezeigt (in dem fall hier der preis)

hat jemand dafür zufällig nen tipp? oder evtl sogar ein fertiges script, dass sowas realisiert?

kann man die vom user getroffene auswahl dann auch per email versenden lassen?

vielen dank schonmal!

d4f

Code

<script type="text/javascript">
spalte1 = '';
spalte2 = '';
function aendere(option, spalte) {
var imgdiv = document.getElementById("imgdiv");
var txtdiv = document.getElementById("txtdiv");
if (spalte == 'spalte1') {
	spalte1 = option;
}
else {
	spalte2 = option;
}
switch (spalte1) {
	case "bild1":
		imgdiv.innerHTML = '<img src=BILD1 alt=bild1>';
		if (spalte2 == 'ja') {
			txtdiv.innerHTML = 'Sieht Bild1 nicht schoen aus?';
		}
		if (spalte2 == 'nein') {
			txtdiv.innerHTML = 'Bild1 ist haesslich!';
		}
		break;
	case "bild2":
		imgdiv.innerHTML = '<img src=BILD2 alt=bild2>';
		if (spalte2 == 'ja') {
			txtdiv.innerHTML = 'Sieht Bild2 nicht schoen aus?';
		}
		if (spalte2 == 'nein') {
			txtdiv.innerHTML = 'Bild2 ist haesslich!';
		}
		break;
}
}
</script>
<table border=0>
	<tr>
		<td>
			Wähle das Bild
		</td>
		<td width="20">



		</td>
		<td>Gefällt es dir?
	</tr>
	<tr>
		<td onclick="javascript:aendere('bild1', 'spalte1')">
			Bild 1
		</td>
		<td width="20">



		</td>
		<td onclick="javascript:aendere('nein', 'spalte2')"> 
			Nein
		</td>
	</tr>
	<tr>
		<td onclick="javascript:aendere('bild2', 'spalte1')">
			Bild 2
		</td>
		<td width="20">



		</td>
		<td onclick="javascript:aendere('ja', 'spalte2')">
			Ja
		</td>
	</tr>
	<tr>
		<td colspan=3>


</td>
	</tr>
	<tr>
		<td>
			Bild:
			<div id='imgdiv'>noch kein Bild</div>
		</td>
		<td width="20">



		</td>
		<td>
			Text: 
			<div id='txtdiv'>noch kein Text</div>
		</td>
	</tr>
</table>

Alles anzeigen

Musst oben im javascript-Code einfach Elemente beifuegen/aendern und in der tabelle die onclick() aendern...

Die Auswahl per email versenden ist php, wenn du das auch brauchst kann ichs dir gerne coden, sags nur

-TS-design

vielen, vielen, vielen, vielen dank

habs erst total übersehen, weil du den post ja editiert hast die ganze zeit auf nen neuen gewartet

sollte ich noch fragen haben meld ich mich

-TS-design

eine frage hab ich da noch...

jetzt steht da ja quasi der text

Bild1
Bild2

da kann der user dann draufklicken und tadaaa, ändert sich unten die anzeige.

allerdings verhält sich die maus genau wie bei normalem text, sprich sie verwandelt sich nich zur hand.

gibts da ne möglichkeit das noch hinzubekommen, dass das auch jeder checkt, dass er da klicken kann?

-TS-design

achja, direkt noch ne frage

lässt sich da auch noch einbauen, dass wenn ich auf "ja" bzw "nein" klicke jeweils auch ein bild ausgegeben wird, allerdings UNTER der tabelle (bzw in einer neuen zeile) und mittig zentriert?

vielen vielen dank bereits im vorraus, was würd ich nur ohne euch genies machen?

d4f

---FRAGE 1----

Setz folgendes Style-Element in deinen <div>:

Code

style="cursor:pointer;">

Alternativ kannste auch einen <button> machen dem du den Code gibst oder es anderseitig loesen... gibt eine Menge Methoden dies zu bewerkstellen.

----FRAGE2-----
Die Tabelle hab ich nur aufgebaut, damit es schoen strukturiert aussieht, sie muss nicht existieren, irgendwelche Felder (oder Bilder/e.t.c.) muessen nur den jeweiligen Javascript-Aufruf beinhalten.

Du kannst oben im Javascript den Code aendern/Code hinzufuegen welcher in ein div ausgegeben wird, wo er ist ist voellig egal solange er eine id hat die im Script erkannt wird

----

Ich kann dir auch gerne (und natuerlich voellig kostenlos) ein auf dein Projekt/deine Seite fertig zugeschnittenes Script bauen, welches dann u.a. auch User beruecksichtigen koennte welche kein Javascript haben (falls es eine eigene Seite ist, bei ebay gehts leider nicht, da es PHP benoetigt). Schreib mich, falls interessiert, auf ICQ 248-978-444 an oder PN

MfG
Daniel

-TS-design

ok, frage 1 is schonmal erfolgreich gelöst vielen dank

bei frage 2 hab ich allerdings noch große verständnisprobleme...

ich hab mal im anhang ne animierte grafik mit angehängt, wie es sein sollte...

im prinzip is ja auch alles schon so, nur halt (wie da auch zu sehen ist) soll beim klick auf JA oder NEIN nicht nur der "KombiText" erscheinen, sondern unten in der mitte noch eine grafik.

ich verstehs echt nich

d4f

Eine neue Version mit allen bis jetzt geposteten Neuerungen&Aenderungen. Die ID des div des Bildes zum Text heisst txtimg

Code

<script type="text/javascript">
spalte1 = '';
spalte2 = '';
function aendere(option, spalte) {
var imgdiv = document.getElementById("imgdiv");
var txtdiv = document.getElementById("txtdiv");
var txtimg = document.getElementById("txtimg");
if (spalte == 'spalte1') {
	spalte1 = option;
}
else {
	spalte2 = option;
}
switch (spalte1) {
	case "bild1":
		imgdiv.innerHTML = '<img src=BILD1 alt=bild1>';
		if (spalte2 == 'ja') {
			txtdiv.innerHTML = 'Sieht Bild1 nicht schoen aus?';
			txtimg.innerHTML = '<img src=BILD11 alt=bild1-ja>'
		}
		if (spalte2 == 'nein') {
			txtdiv.innerHTML = 'Bild1 ist haesslich!';
			txtimg.innerHTML = '<img src=BILD12 alt=bild1-nein>'
		}
		break;
	case "bild2":
		imgdiv.innerHTML = '<img src=BILD2 alt=bild2>';
		if (spalte2 == 'ja') {
			txtdiv.innerHTML = 'Sieht Bild2 nicht schoen aus?';
			txtimg.innerHTML = '<img src=BILD21 alt=bild2-ja>'
		}
		if (spalte2 == 'nein') {
			txtdiv.innerHTML = 'Bild2 ist haesslich!';
			txtimg.innerHTML = '<img src=BILD22 alt=bild2-nein>'
		}
		break;
}
}
</script>
<table border=0>
	<tr>
		<td>
			Wähle das Bild
		</td>
		<td width="20">



		</td>
		<td>Gefällt es dir?
	</tr>
	<tr>
		<td style="cursor:pointer;" onclick="javascript:aendere('bild1', 'spalte1')">
			Bild 1
		</td>
		<td width="20">



		</td>
		<td style="cursor:pointer;" onclick="javascript:aendere('nein', 'spalte2')"> 
			Nein
		</td>
	</tr>
	<tr>
		<td style="cursor:pointer;" onclick="javascript:aendere('bild2', 'spalte1')">
			Bild 2
		</td>
		<td width="20">



		</td>
		<td style="cursor:pointer;" onclick="javascript:aendere('ja', 'spalte2')">
			Ja
		</td>
	</tr>
	<tr>
		<td colspan=3>


</td>
	</tr>
	<tr>
		<td>
			Bild:
			<div id='imgdiv'>noch kein Bild</div>
		</td>
		<td width="20">



		</td>
		<td>
			Text: 
			<div id='txtdiv'>noch kein Text</div>
		</td>
	</tr>
</table>






<div id='txtimg'>noch kein Bild</div>

Alles anzeigen

-TS-design

aaaaahhhh eine erleuchtung

jetzt wo's da steht siehts ja ganz logisch aus, aber von alleine wär ich da mal wieder nich drauf gekommen

tausend dank... bin jedes mal wieder überrascht was man hier nich alles lernen kann

Tags