Bildauswahl mit Textanzeige [IE|M|O|S|G]

von: Werner Zenk

Mit einer Auswahlliste Bilder und Beschreibungen anzeigen.

Demo:

Quelltext:

<script type="text/javascript">
var txt = new Array;
var bild = new Array;

txt[1] = "Der Text für Bild 1";
bild[1] = "bild1.gif";

txt[2] = "Der Text für Bild 2";
bild[2] = "bild2.gif";

txt[3] = "Der Text für Bild 3";
bild[3] = "bild3.gif";

function zeige() {
 var ID = document.Form.auswahl.options[document.Form.auswahl.selectedIndex].value;
 if (ID != "-Wähle aus-") {
 document.getElementById("bil").innerHTML = '<img src="' + bild[ID] + '">';
 document.getElementById("tex").innerHTML = txt[ID];
 }
}
</script>

<form method="post" action="" name="Form">
<select size="1" name="auswahl">
<option>-Wähle aus-</option>
<option value="1">Bild 1</option>
<option value="2">Bild 2</option>
<option value="3">Bild 3</option>
</select>
<input type="button" value="und los" onClick="zeige();">
</form>

<span id="bil">&thinsp;</span><br>
<span id="tex">&thinsp;</span>

Soll ein Bild mit einer Beschreibung schon vor der Auswahl angezeigt werden, fügen Sie folgendes ein:

<span id="bil"> <img src="bild.gif"> </span><br>
<span id="tex"> Beschreibung </span>

Wenn das Bild gleich nach dem auswählen angezeigt werden soll, also ohne auf den Button zu klicken, fügen Sie folgendes ein:

<select size="1" name="auswahl" onChange="zeige();">

• Mit einem Link Bilder und Beschreibungen anzeigen

Demo:

» Kanada
» Italien
» Namibia

Quelltext:

<script type="text/javascript">
var txt = new Array;
var bild = new Array;

txt[1] = "Der Text für Bild 1";
bild[1] = "bild1.gif";

txt[2] = "Der Text für Bild 2";
bild[2] = "bild2.gif";

txt[3] = "Der Text für Bild 3";
bild[3] = "bild3.gif";

function zeige_l(ID) {
document.getElementById("bld").innerHTML = '<img src="' + bild[ID] + '">';
document.getElementById("txt").innerHTML = txt[ID];
}
</script>

<a href="javascript:zeige_l('1');">Kanada</a><br>
<a href="javascript:zeige_l('2');">Italien</a><br>
<a href="javascript:zeige_l('3');">Namibia</a><br><br>

<span id="bld">&thinsp;</span><br>
<span id="txt">&thinsp;</span>

Soll ein Bild mit einer Beschreibung schon vor der Auswahl angezeigt werden, fügen Sie folgendes ein:

<span id="bld"> <img src="bild.gif"> </span><br>
<span id="txt"> Beschreibung </span>

Und Ihre Meinung? Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?

Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!

Das könnte Sie interessieren:

Counter (Zähler) zu einem bestimmten Ereignis - Dieser Counter zeigt an wieviele Tage ...

Button mit wechselnder Beschriftung

Sound bei Link-Klick - Beim Klicken auf dem Link wird ein Sound abgespielt.

Formular auf HTML-Tags testen

Zähler (Countown) mit Weiterleitung

JavaScript Grundkurs - 4. Gleich oder Ungleich

Dynamisches Eingabefeld - mit Auswahlliste …mehr