Mit Auswahlmenü Bild und Text ändern! Brauche Hilfe...

[LadyMalia<3]

Hallo.

Ich bin eine absolute Anfängerin und kenne mich noch nicht ganz so gut HTML & Co. aus. Bis jetzt habe ich mich immer so ein bisschen durch homepage-total.de gefressen, aber für meinen folgenden Wunsch habe ich dort leider nichts gefunden, und wenn habe ich es nicht umschreiben können. Vielleicht könnt ihr mir ja helfen!

Ich möchte mit einem Auswahlmenü ein Bild und eine dazugehörige beschreibung auswählen/ändern.
Man wählt z.B. im Auswahlmenü "Wald" oä., bestätigt dann mit "Los!" und daneben erscheint ein Bild mit Bäumen und darunter irgentein Waldgedicht.

Also quasi wie eine Art Bildergallerie... eigentlich ganz simpel...

Ich kann das ganze nicht so gut beschreiben, deswegen hab ich hier mal ein Beispielbild gemacht!:

Es wäre wunderbar, wenn mir da einer helfen könnte...Und einen "Code" für mich hat oder Links, wo es sowas gibt. (Ich hoffe, das lässt sich mit HTML amchen, sonst bin ich in diesem Forum ja falsch... :( )

Vielen herzlichen Dank schonmal im Vorraus!


Mit freundlichen Grüßen

LadyMalia

 

[LadyMalia<3]

*schubs*

Kann mir denn niemand helfen? :(



LG LadyMalia<3

 

[ben]

hey
also soll das nur so angezeigt werden oder was ist deine frage?

stell es in einer tabelle dar

<table border="1">
<tr>
<td>

<select>
<option>--Wahle aus--</option>
<option>Wald</option>
<option>Strand</option>
<option>Sonne</option>
<option>Meer</option>
<option>Tiere</option>
<option>Blumen</option>
</select>
<input type="button" value="und los" onclick="example()" />
</td>
<td class="rechts">

hier deine bilder ... einfuegen

und nen p tag mit deinem text

</td>
</tr>
</table>

deine funktion beim klick auf den button muesstest du mit javascript machen aber ich weis ja nicht was du genau willst ;)
dan zusatzlich fur den style fueg noch css hinzu

<style type="text/css">
<!--
table {
height: 500;
width: 90%
}
.rechts {
vertical-align:top

}
-->
</style>

ich hoffe ich konnte helfen
MfG ben

 

[ben]

ich hab das jetzt noch mal auf deine function angepasst

<table border="1">
<tr>
<td>

<select id="auswahl">
<option value="0">--Wahle aus--</option>
<option value="1">Wald</option>
<option value="2">Strand</option>
<option value="3">Sonne</option>
<option value="4">Meer</option>
<option value="5">Tiere</option>
<option value="6">Blumen</option>
</select>
<input type="button" value="und los" onClick="example()" />
</td>
<td class="rechts">


<div id="wald">wald</div>
<div id="strand">strand</div>
<div id="sonne">sonne</div>
<div id="meer">meer</div>
<div id="tiere">tiere</div>
<div id="blumen">blumen</div>




</td>
</tr>
</table>

und in den head dann der javascript code und css

<style type="text/css">
<!--
table {
height: 500;
width: 90%
}
.rechts {
vertical-align:top;
width:50%
}
#strand, #sonne, #meer, #tiere, #blumen {
display:none    
}
#wald {
display:block    
}
-->
</style>
<script type="text/javascript">
function example() {
if(document.getElementById("auswahl").value == '0') {
alert('bitte wahlen sie was aus')
}else {
document.getElementById("wald").style.display = 'none';
document.getElementById("strand").style.display = 'none';
document.getElementById("sonne").style.display = 'none';
document.getElementById("meer").style.display = 'none';
document.getElementById("tiere").style.display = 'none';
document.getElementById("blumen").style.display = 'none';
}

if(document.getElementById("auswahl").value == '1') {
document.getElementById("wald").style.display = 'block';
}
if(document.getElementById("auswahl").value == '2') {
document.getElementById("strand").style.display = 'block';
}
if(document.getElementById("auswahl").value == '3') {
document.getElementById("sonne").style.display = 'block';
}
if(document.getElementById("auswahl").value == '4') {
document.getElementById("meer").style.display = 'block';
}
if(document.getElementById("auswahl").value == '5') {
document.getElementById("tiere").style.display = 'block';
}
if(document.getElementById("auswahl").value == '6') {
document.getElementById("blumen").style.display = 'block';
}

}
</script>

fur dei div tags einfach die worter durch das bild und den text ersetzten.
div tags hier nur weil es bild und text ist bei nur text besser p tags nehmen.

das war jetzt mal eine moeglichkeit das zu machen aber javascript kann der user auch ausschalten dann geht das nicht mehr. ich hab mir javascript selbst beigebracht also ware gut wenn da mal einer druber guckt der "profi" ist aber funktioniert soweit.

hoffe das enspricht deinen vorstellungen
MfG ben

 

[Efchen]

Mit Tabellen hat das Ganze natürlich rein gar nichts zu tun, HTML ist nicht für die Darstellung.

Das Problem lässt sich mit JavaScript oder mit einer serverseitigen Programmiersprache lösen, wobei JavaScript den Vorteil hat, dass die Seite nicht neu aufgebaut wird, aber den entscheidenden Nachteil, dass es abschaltbar ist. Soll das aber trotzdem bei jedem funktionieren, kommst Du um eine serverseitige Lösung (z.B. mit PHP) und ums Programmieren nicht drumrum.