Bilder aufgrund einer Auswahlliste darstellen

**pucki** · 07-02-2011, 11:23

Hallo,
ich habe eine Reihe von Bildern bei denen ich dem Betrachter die Möglichkeit geben möchte die Auswahl der Bilder selbst festzulegen. Es sollen immer 4 Bilder angezeigt werden. Die ausklappbaren Auswahllisten kann ich problemlos von Hand füllen, allerdings habe ich kein Beispiel dazu gefunden, wie ich die Daten dann an <object data=... > weiterreiche. Da das ganze von einer CD laufen soll, kann ich allenfalls java-script einsetzen. Hier eine Übersicht, die das gewünschte Ergebnis verdeutlichen soll.

Code:

|Auswahlliste|Auswahlliste|
|    Bild    |   Bild     |

|Auswahlliste|Auswahlliste
|    Bild    |   Bild     |

Hätte da jemand einen Tip wie sich das realisieren lässt?

Grüße

Reinhard

**BlueJay** · 07-02-2011, 17:52

Hallo Pucki,

meinst Du so was?

Code:

<form name="form_bla"...
<select name="pic1">
<option value="bild11.jpg">Morgenröte</option>

Das ginge mit:

Code:

var nr=document.form_bla.pic1.selectedIndex;
document.images["zielbild1"].src=document.form_bla.pic1[nr].value;

wobei Zielbild der Name des Bildobjektes ist, das das Biold aufnehmen soll.

Gruß,
Ulrike

**pucki** · 08-02-2011, 23:50

Hallo Ulrike,

danke für die Anregung, es war nicht ganz was ich wollte, aber zumindest bin ich so langsam dahinter gekommen, wie die Objekte mit JavaScript angesprochen werden.

Das ist am Ende dabei herausgekommen ...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

       "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Auswahl von Objekten &uuml;ber ein Listenfeld</title>
<script type="text/javascript">
function Go(select){
	var wert = select.options[select.options.selectedIndex].value;
	var im  = "o" + select.name;
	document.getElementById(im).data=wert;
}
</script>

<style type="text/css">
	body{ 
		margin:10px 0px; padding:0px;
		color:#000000; 
		background-color:#EEEEEE; 
	}
	select{ 
		width:250px; 
		background-color:#FFFFE0; 
		font-size:14px; 
		font-family:Arial,sans-serif; 
	}
	p{ 
		width:1200px;
		font-size:16px; 
		font-family:Arial,sans-serif;
		text-align: justify;
	}
	
	h1{
		width:640px;
		text-align: justify;
	}
	#warning{
		width: 640px;
		font-size: 16px; 
		font-family: Arial,sans-serif;
		left: 50px;
		top: 50px;
		margin-left: 50px;
		color: red;	
	}
	
	#Content {
		width:640px;
		margin:0px auto;
	}
</style>

</head>

<body>

<dir id="Content">
	<noscript>
		<div id="warning"> Sie haben bei Ihrem Browser JavaScript deaktiviert. F&uuml;r die 
			Auswahl der Bilder &uuml;ber die Listenfelder ist JavaScript jedoch erforderlich. 
			Aktivieren Sie JavaScript in Ihren Browser-Einstellungen.
		</div>
	</noscript>


	<h1>Beispiel f&uuml;r die Auswahl von Objek- te &uuml;ber ein Listenfeld</h1>


	<form name="tl">
		<select name="fig1" size="1" onchange="Go(this)">
			<option value="./green.jpg" SELECTED>Gr&uuml;nes Feld</option>
			<option value="./red.jpg">Rotes Feld</option>
		</select>
	</form>

	<object id="ofig1" data="./noname.jpg" type="image/jpg">

    	Ihr Browser kann das Objekt leider nicht anzeigen!

	</object>


	<script type="text/javascript" >
		Go(document.tl.fig1);
	</script>
</div>


</body>

</html>

Das ganze dann vier mal in eine 2x2 Tabelle und ich hatte was ich wollte.

Das ganze ist zwar etwas mehr als ein Minimalbeispiel, aber vielleicht hilft es mal anderen weiter ...

Grüße

Reinhard

ps: Bildformat: 640 x 400 Pixel, noname.jpg muss nicht existieren ...

Thema: Bilder aufgrund einer Auswahlliste darstellen

Themen-Optionen

Thema bewerten

Anzeige

Hybrid-Darstellung

Bilder aufgrund einer Auswahlliste darstellen

Lesezeichen

Lesezeichen

Berechtigungen