✔ Bilderauswahl

[Kalito]

Ich habe auf dem ftp-Server einen Ordner mit meinen Bilder, welche ich mittels einer Funktion auslese und anzeigen lasse. Bisher war es so, das ich neben jedes Bild ein Radiobutton stehen hatte. Ich persönlich finde es aber hässlich und würde gerne die Auswahl durch das Klick auf das Bild realisieren. Mein erster Gedanke war der <button>-Tag, aber da das eher wie ein submit-button funktioniert,habe ich ihn verworfen, da ja nach der Bildwahl weitere Auswahlmöglichkeiten kommen. Der folgendeGedanke war folgendes

<form method="post">
	<div>
	<label for="bild1"><img src="mann.jpg" width="106" height="109" alt="Mann" /></label>
	<input type="radio" id="bild1" name="Geschlecht" value="Mann" style="display: none;"/>

	<label for="bild3"><img src="frau.jpg" width="106" height="109" alt="Mann" /></label>
	<input type="radio" id="bild2" name="Geschlecht" value="Frau" style="display: none;"/>

    <label for="bild3"><img src="kind.jpg" width="106" height="109" alt="Mann" /></label>
	<input type="radio" id="bild3" name="Geschlecht" value="Kind" style="display: none;"/>
	</div>
</form>

Aber irgendwie kann ich das Bild nicht anklicken

Wie löse ich also am besten das Problem?

 

[Tim Bureck]

Beim zweiten Label hast du beim for-Attribut bild3 statt bild2 angewählt. Ansonsten sollte das so klappen, habe es eben nochmal schnell getestet.

Was genau funktioniert denn da nicht?

Edit: Kind ist irgendwie ein komisches Geschlecht

 

[Kalito]

jetzt ****t es

Und wie mache ich es, dass, wenn das Radiobutton aktiv ist, das ein Rahmen um das Bild kommt. Ist das dann mit Javascriptoder mit css machbar?

 

[Yaslaw]

Ich verschibs mal ins HTML-Forum. Hat ja nix mit PHP zu tun

 

[tombe]

Ein bisschen was geändert, ein bisschen was dazu:

<script language="javascript" type="text/javascript">
function auswahl (bild) {
	document.getElementById("lbl1").style.borderStyle = "none";
	document.getElementById("lbl2").style.borderStyle = "none";
	document.getElementById("lbl3").style.borderStyle = "none";
	document.getElementById("bild" + bild).checked = true;
	document.getElementById("lbl" + bild).style.borderStyle = "solid";
}
</script>
<form method="post">
	<div>
	<label id="lbl1" for="bild1" style="border-style: none;"><img src="mann.jpg" width="106" height="109" alt="Mann" onclick="auswahl(1);"/></label>
	<input type="radio" id="bild1" name="Geschlecht" value="Mann" style="display: block;"/>

	<label id="lbl2" for="bild2" style="border-style: none;"><img src="frau.jpg" width="106" height="109" alt="Frau" onclick="auswahl(2);"/></label>
	<input type="radio" id="bild2" name="Geschlecht" value="Frau" style="display: block;"/>

    <label id="lbl3" for="bild3" style="border-style: none;"><img src="kind.jpg" width="106" height="109" alt="Kind" onclick="auswahl(3);"/></label>
	<input type="radio" id="bild3" name="Geschlecht" value="Kind" style="display: block;"/>
	</div>
</form>

Damit man sieht was passiert, habe ich die Option-Buttons mal wieder sichtbar gemacht!