Asynchrones Laden von Bildern per JavaScript

Manuel · 25. Mai 2009

Hallo,
Tim, die Frage wirst du am besten beantworten können. Bei BisaWorld hat Tim bei der Auswahl welcher Charakter man sein möchte, so ein Tabmenue gemacht mit <select> und <option>. Sowas kann ich auch machen blos, wenn man wählt z.B. Pokemon Ranger, läd daneben ein Bild wo man dann die Figur sieht. Ich habe vor ein Tauschbasar Skript zu coden, und dort soll man auswählen welches Pokemon man anbieten will. Ich will aber auch das daneben nach der Auswahl ein Bild geladen wird. Blos wie mache ich das. Dann die zweite Frage, wie mach ich das, wenn man in ein Eingabefeld was reinschreibt das sich da auch ein Bild läd. Also z.B ich geb ein. 001. Dann soll sich daneben das Bisasam laden. Blos wie geht das? Hoffe ich habs deutlich geschrieben. Ich tu mich bei dem Beschreiben immer schwer.

Danke schonmal im Vorraus
Vesprit

Leon · 25. Mai 2009

Nen passenden Code kann ich dir jetzt nicht geben, is einfach n bisschen zu viel, um das mal schnell zu coden. Aber ich kann dir die Vorgehensweiße erklären. Is alles btw in JavaScript:

Dass das Bild autmatisch nachgeladen wird, wenn man in der DropDown-List etwas auswählt, ist nicht so schwer. Mit nem Event-Handler überwacht man die Änderung in der Dropdown-List und holt sich so das aktive Listenelement. Mit der Info, welches Listenelement grad aktiv ist, kann man dann eben ein bestimmtes Bild einblenden lassen bzw. wieder ausblenden.
Ähnlich siehts bei der Texteingabe aus: Mit nem Event-Handler die Änderungen im Textfeld überwachen, wenn dann etwa die passende Nummer drin steht, kann man darauf entsprechend reagieren und hier etwa das passende Bild nachladen.

Wie du vielleicht erkannt hast, sind die Event-Handler das wichtigste. Über die kannst du die änderungen überwachen und den aktuellen Wert entsprechend verarbeiten. Natürlich muss dem Eventhandler auch eine entsprechende Funktion zugewiesen werden, die das übernimmt.

Manuel · 25. Mai 2009

Ich weis das es mit JavaScript ist. Ich hab mich mit JavaScript nie auseinandergesetzt und will ich auch imoment nicht... Ich hab das was du geschrieben hast nicht verstanden. Tim, kannst mir den Code schicken?

Plinfo · 25. Mai 2009

Also, ich habe jetzt eine halbe Stunde im Netz gesucht, und bin auf etwas gekommen, das deinen Wuenschen nahe kommt.
Also, der Code:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Spoiler</title>
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else
e.style.display = 'none';
}
//-->
</script>
</head>
<body>
<a onclick="toggle_visibility('foo');"><input type="button" value="Bitte ausklappen"></a>
<div id="foo" style="display: none; float: right;">
<img src=".jpg">
</div>
</body>
</html>

Alles anzeigen

Im img Tag ist klar was reinkommt, der Pfad. Du kannst natuerlich den Namen aendern, der da jetzt momentan steht. Wenn man da rauf geht, kannst du Bilder erscheinen lassen, wo innen auch eine Beschreibung ist, vielleicht ist sowas, was du gesucht hast.

Manuel · 25. Mai 2009

Ne, kein Klapptextfenster. Das ist wieder was anderes.

chris_g_ivi · 25. Mai 2009

Ich kenne etwa die Lösung (auch in Ansätzen).
Zudem hättest du dir die Scripts von Tim ansehen können und so was lernen können. (Aber nicht kopieren!)

Code

<script type="text/javascript">	requestImage = function()	{    	// Hier musst du die ID der Box (select) angeben.    	var selectBox = document.getElementById( "pokemonSelection" );    	// Hier musst du die ID des <img>-Tags angeben    	var pokemonImage = document.getElementById( "pokeImage" );    	// Du musst dann alle Bilder von 1 bis 493 durchnummerieren!    	pokemonImage.src = selectBox.selectedIndex + ".png";    	}</script>

Dann müsstest du einen Handler für das Select-Element erstellen.

Code

<select id="pokemonSelection" onChange="void( requestImage() );">
<! -- Options hier -->
</select>

So in etwa. Ist nur ein kleiner Gedankengang!

Gruß
Chris

PS: Wer Fehler findet, darf diese selber behalten!

Manuel · 25. Mai 2009

HTML

<script type="text/javascript">
	requestImage = function()
	{
		// Hier musst du die ID der Box (select) angeben.
		var selectBox = document.getElementById( "pokemonSelection" );
		// Hier musst du die ID des <img>-Tags angeben
		var pokemonImage = document.getElementById( "pokeImage" );


		// Du musst dann alle Bilder von 1 bis 493 durchnummerieren!
		pokemonImage.src = selectBox.selectedIndex + ".gif";
		}
</script>


<select id="pokemonSelection" onChange="void( requestImage() );">
<option value="">Bild auswählen</option>
<option id="pokemonSelection" onChange="void( requestImage() );" value="0">001</option>
</select>

Alles anzeigen

Geht irgendwie nicht. Das Bild wird nicht geladen. Das Bild 1.gif ist im selben Ordner wie das Skript.

Leon · 26. Mai 2009

In deiner Version sind auh so einige Fehler. Mit Chris' Version wär schon gegangen, nur is bei dir eine ID merfach vergeben und der onchange-Funktionsaufruf zusätzlich noch an einer falschen Stelle. Außerdem fehlt das img-Tag, worin das Bild dann dargestellt werden sollte.
Hab mir mal Chris' Script genommen und ein klein wenig umgebaut:

HTML

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<meta http-equiv="content-style-type" content="text/css" />
		<meta http-equiv="content-script-type" content="text/javascript" />
		<meta http-equiv="content-language" content="de-DE" />
		<title>JavaScript-Test</title>
		<script type="text/javascript">
			// <![CDATA[
				requestImage = function(selectList) {
					// Du musst alle Bilder von 1 bis 493 durchnummerieren!
					// Hier musst du die ID des <img>-Tags angeben
					var pokemonImage = document.getElementById('pokeImage');

					if (selectList.selectedIndex == 0) {
						pokemonImage.src = '';
					} else {
						pokemonImage.src = selectList.selectedIndex+'.png';
					}
				}
			// ]]>
		</script>
	</head>
	<body>
		<div>
			<select id="pokemonSelection" onchange="void(requestImage(this));">
				<option>&nbsp;</option>
				<option>Bisasam</option>
				<option>Bisaknosp</option>
			</select><br />
			<img src="" alt="" id="pokeImage" />
		</div>
	</body>
</html>

Alles anzeigen

Die Bilder müssen im selben Ordnerliegen. Wenn die woanders liegen sollen, schau dir den zugewiesenen Wert an pokemonImage.src genauer an. Hier kannst du bei einem anderen Speicherort den Pfad anpassen.
Dann eben die Bilder von 1 bis 493 Durchnummerieren. Das "leere" <option>-Tag is btw wichtig, da JavaScript bei der Zählung mit 0 beginnt, wir aber lieber mit 1 anfangen.

Hab das auch lokal bei mir getestet. Funktioniert einwandfrei.

Manuel · 26. Mai 2009

Jo danke Leon, genau so gehts. Ich baus dann so um, dass das Bild rechts erscheint. Danke, jetzt kann ich weiter skripten :)

Benutzer online in diesem Thema