Javascript :: Bildwechsel Onclick Radio ::

puur · 05.01.2009

So tach jesagt,

Wie man dem Topic hoffentlich entnehmen kann brauch ich dringend hilfe.
Folgendes hab ich mir vorgestellt:

Ich habe eine Liste mit Spielen, von dem man sich via RADIO BUTTON eins aussuchen kann. Klickt man also auf z.B. Half-Life, so soll rechts ein Bild erscheinen mit dem Halflife Logo... entscheidet man sich dann doch eher für Unreal Tournament, so soll er sofort auf das UT-Logo wechseln.

was ich bisher hab ist ->

HTML:

<div style="float: left; width: 158px; color: #e0e0e0">
    <input class="radio_margin-ie" type="radio" name="Spiel-wahl" value="Half Life" />&nbsp;Half Life<br />
    <input class="radio_margin-ie" type="radio" name="Spiel-wahl" value="Half Life 2" />&nbsp;Half Life 2<br />
    <input class="radio_margin-ie" type="radio" name="Spiel-wahl" value="Counter-Strike" />&nbsp;Counter-Strike<br />
    <input class="radio_margin-ie" type="radio" name="Spiel-wahl" value="Counter-Strike Source" />&nbsp;Counter-Strike Source<br />
    <input class="radio_margin-ie" type="radio" name="Spiel-wahl" value="Counter-Strike Zero" />&nbsp;Counter-Strike Zero<br />
    <br />
</div>
<div style="float: left; color: #e0e0e0; padding-right: 100px;">
    <input class="radio_margin-ie" type="radio" name="Spiel-wahl" value="Day of Defeat" />&nbsp;Day of Defeat<br />
    <input class="radio_margin-ie" type="radio" name="Spiel-wahl" value="Team Fortress 1" />&nbsp;Team Fortress 1<br />
    <input class="radio_margin-ie" type="radio" name="Spiel-wahl" value="Team Fortress 2" />&nbsp;Team Fortress 2<br />
    <input class="radio_margin-ie" type="radio" name="Spiel-wahl" value="Quake 3" />&nbsp;Quake 3<br />
    <input class="radio_margin-ie" type="radio" name="Spiel-wahl" value="Quake 4" />&nbsp;Quake 4<br />
</div>
<div style="float: left;margin-top: 5px; width: 70px; height: 92px; background: #1E2828; color: #e0e0e0;">
Javabild
</div>

Leider weiß ich nicht recht wie ich jetzt vorgehen sollte.

Christian · 05.01.2009

AW: Javascript :: Bildwechsel Onclick Radio ::

HTML:

<script>
var d = document;
var container = 'Bildcontainer';
var imagesArray = new Array();
var imgFolder	 = 'images/';

imagesArray["Half Life"] 				= imgFolder+"half_life.jpg";
imagesArray["Half Life 2"] 			= imgFolder+"half_life2.jpg";
imagesArray["Counter-Strike"] 		= imgFolder+"cs.jpg";
imagesArray["Counter-Strike Source"] = imgFolder+"css.jpg";
imagesArray["Counter-Strike Zero"] 	= imgFolder+"csz.jpg";
/* und so weiter hier,
allerdings muss der Array-Index gleich dem Value-Wert des Radiobuttons sein. */

function findElem( id ){
	if(d.getElementById){
		return d.getElementById(id);
	}
	if(d.all){
		return d.all(id);
	}
	if(d.layers){
		return d.layers(id);
	}
}
function switchImage( id ){
	if( typeof imagesArray[id] != undefined ){
		var imgNode = d.createElement('img');
		imgNode.src = imagesArray[id];
		/* hier können noch weitere Attribute definiert werden, wie zB imgNode.width = '150'; */
		imgNode.border = 1;
		
		var c = findElem(container);
		c.innerHTML = '';
		c.appendChild(imgNode);
	}
}
</script>
<div style="float: left; width: 158px; color: #e0e0e0">
    <input class="radio_margin-ie" onClick="switchImage(this.value);" type="radio" name="Spiel-wahl" value="Half Life" />&nbsp;Half Life<br />
    <input class="radio_margin-ie" onClick="switchImage(this.value);" type="radio" name="Spiel-wahl" value="Half Life 2" />&nbsp;Half Life 2<br />
    <input class="radio_margin-ie" onClick="switchImage(this.value);" type="radio" name="Spiel-wahl" value="Counter-Strike" />&nbsp;Counter-Strike<br />
    <input class="radio_margin-ie" onClick="switchImage(this.value);" type="radio" name="Spiel-wahl" value="Counter-Strike Source" />&nbsp;Counter-Strike Source<br />
    <input class="radio_margin-ie" onClick="switchImage(this.value);" type="radio" name="Spiel-wahl" value="Counter-Strike Zero" />&nbsp;Counter-Strike Zero<br />
    <br />
</div>
<div style="float: left; color: #e0e0e0; padding-right: 100px;">
    <input class="radio_margin-ie" type="radio" name="Spiel-wahl" value="Day of Defeat" />&nbsp;Day of Defeat<br />
    <input class="radio_margin-ie" type="radio" name="Spiel-wahl" value="Team Fortress 1" />&nbsp;Team Fortress 1<br />
    <input class="radio_margin-ie" type="radio" name="Spiel-wahl" value="Team Fortress 2" />&nbsp;Team Fortress 2<br />
    <input class="radio_margin-ie" type="radio" name="Spiel-wahl" value="Quake 3" />&nbsp;Quake 3<br />
    <input class="radio_margin-ie" type="radio" name="Spiel-wahl" value="Quake 4" />&nbsp;Quake 4<br />
</div>
<div id="Bildcontainer" style="float: left;margin-top: 5px; width: 70px; height: 92px; background: #1E2828; color: #e0e0e0;">
&nbsp;
</div>

nicht getestet aber so ungefähr in die Richtung dürfte das gehen.

Edit: ups kleiner Fehler unterlaufen in der Syntax, also bei mir klappts jetzt=)

puur · 05.01.2009

AW: Javascript :: Bildwechsel Onclick Radio ::

hey cool danke für die schnelle umfassende Hilfe ! werde das bei mir mal einbauen! ich geb dir dann gleich nochmal Feedback

***EDIT***

Ne klappt leider noch nicht bei mir ;( aber er lädt für 1ms aber das Bild kommt nich..

***EDIT***

HA ICK NEHM ALLES ZUUUURÜÜÜÜÜCK !!! Wunderbar das klappt jetzt. ICh hab mihc nur etwas dusselig angestellt, kann auch an der Uhrzeit liegen

DANKESEHR damit hast du mir wirklich sehr geholfen !