Wie erstelle ich Bilder die wie eine Checkbox funktionieren?

Hallo, auf meiner Seite werden mit einem PHP Script alle Bilder aus einem Ordner ausgelesen und angezeigt, wenn ich über diese mit der Maus drüber gehe wird der rand blau und wenn ich auf sie klicke wird der Rand rot.

Nun suche ich nach einer Möglichkeit das wenn ich auf ein Bild klicke das es ausgewählt bleibt, damit ich per Formular übermitteln kann das dieses Bild ausgewählt wurde.

Mit freundlichen Grüßen Dennis

Answer 1

[WhiteGandalf]

Wobei die Version von jlemonde allerdings Javascript erfordert.

Falls Du was ohne Javascript - in purem CSS - aufsetzen möchtest, bastel Dir zu jedem von ihm erwähnten input ein "label", in welches Du das Bild steckst! Die funktionale Verbindung von Label, Bild und Input ist HTML-Angelegenheit, dafür braucht man kein Javascript: Gib dem Label ein Attribut "for=..." und dem zugehörigen input eine "id=...", wo beide Pünktchen mit demselben Wert gefüllt werden (lass ne Variable hochzählen oder sowas).

Comments

[qwdfgosmd]

Und wie zählt man mit CSS eine Variable hoch? Garnicht. Dazu braucht man wieder JavaScript! Die Antwort nützt also nicht viel.

Answer 2

[maximilianus7]

was meinst du mit:

"per Formular übermitteln kann das dieses Bild ausgewählt wurde."

? 
du kannst mit <img src="pfad-des-bildes" onclick="anweisung"> schon einiges machen. hängt aber davon ab, was du genau vorhast.

Comments

[DennisR1]

Momentan werden alle Bilder aus meinem "bilder" Ordner ausgelesen und angezeigt. 

Nun hatte ich vor das wenn man auf ein Bild klickt das der Rand rot wird und bleibt und wenn mann auf "Submit" geht das dann der Link dieses Bildes in der Datenbank gespeichert wird.

Answer 3

[jlemonde]

Du kannst in dein Formular ein Input type=hidden name=wasauchimmer eintragen. Wenn du dann auf ein Bild klickst, ändert sich das value Feld dieses inputs. ZB : myinput.value += this.id + ';'; und wenn das Bild nicht mehr ausgewählt werden soll, dann myinput.value = myinput.value.replace(this.id + ';', ''). Es ist nur ein Beispiel, wie du es machen könntest, würde es aber so versuchen. Per PHP muss du den Inhalt dann aber auch analysieren. PS statt this.id könntest du auch this.src schreiben, was hilfreicher wäre. Hoffe ich konnte helfen.

Answer 4

[DennisR1]

Danke schon mal für die schnellen Antworten.

Hier ist einmal der Code: http://codeshare.io/9UL58

Für mich klinkt die Antwort von "WhiteGandalf" am einfachsten, jedoch reicht mein Verständnis von JavaScript und HTML Inputs noch nicht aus um aus seiner Antwort schlüssig zu werden.

Könnte mir da vielleicht jemand helfen?