Antworten auf deine Fragen:
Neues Thema erstellen

Javascript :: Bildwechsel Onclick Radio ::

puur

Nicht mehr ganz neu hier

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

verpeilt & verschallert

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=)
 
Zuletzt bearbeitet:

puur

Nicht mehr ganz neu hier

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 !
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.614
Beiträge
1.538.351
Mitglieder
67.525
Neuestes Mitglied
mgtaucher
Oben