Bilder aufgrund einer Auswahlliste darstellen [Archiv]

Archiv verlassen und diese Seite im Standarddesign anzeigen : Bilder aufgrund einer Auswahlliste darstellen

pucki

07-02-2011, 10: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.

|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, 16:52

Hallo Pucki,

meinst Du so was?

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

Das ginge mit:

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, 22: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 ...

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

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

<html>

<head>

<title>Auswahl von Objekten ü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ür die
Auswahl der Bilder über die Listenfelder ist JavaScript jedoch erforderlich.
Aktivieren Sie JavaScript in Ihren Browser-Einstellungen.
</div>
</noscript>

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

<form name="tl">
<select name="fig1" size="1" onchange="Go(this)">
<option value="./green.jpg" SELECTED>Grü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 ...