Anzeige:
Ergebnis 1 bis 3 von 3

Thema: Bilder aufgrund einer Auswahlliste darstellen

  1. #1
    Registrierter Benutzer
    Registriert seit
    28.07.2000
    Beiträge
    123

    Bilder aufgrund einer Auswahlliste darstellen

    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

  2. #2
    Registrierter Benutzer Avatar von BlueJay
    Registriert seit
    27.08.2004
    Beiträge
    825
    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
    Eigentlich ganz einfach, wenn man's weiss!

  3. #3
    Registrierter Benutzer
    Registriert seit
    28.07.2000
    Beiträge
    123
    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 ...

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •