• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bilder auswählen

B

blabla333

Mitglied
Ich weiß nicht, ob das jetzt die richtige Kategorie ist. Oder doch CSS?
Ich habe eine Thumbnail-Übersicht bei der man diverse Bilder auswählen kann. Die Auswahl wird dann weiterverarbeitet (aber das gehört dann sowieso in den JS-Bereich).

Mir geht es schlicht um die Darstellung (HTML/CSS):
Ich habe das simple Gerüst
HTML: 
<img class="tn" src="bild1.jpg">
<img class="tn" src="bild2.jpg">
<img class="tn" src="bild3.jpg">

Wie richte ich es nun ein, dass man jetzt Bilder auswählen kann (und z.B. einen Haken setzen kann oder aber auf einen anderen Weg markieren kann)? Letztlich möchte ich dann eine Bild-ID weitergeben.
Mit anderen Worten: Wie verbinde ich das Bild und eine Checkbox? Oder gibt es geschicktere Ansätze?

Ich kann ja auch per JS eine Klasse bei Klick auf das Bild hinzufügen und hierüber die Darstellung (z.B. farblicher Rahmen) steuern. Aber wie übermittel ich dann die Auswahl an das weiterverarbeitende Script?

Ich hoffe ihr versteht mein Problem. Ich brauche nur eine Idee, wie man das am geschicktesten umsetzt.
 
Zuletzt bearbeitet:
Werbung:
Das weiterverarbeitende Script ist ein PHP-Script, welches die ausgewählten Bilder löscht oder in einen anderen Ordner verschiebt o.ä. Dinge.
Ich weiß einfach nicht, wie ich eine schicke Auswahlmöglichkeit realisiere. Also einfach auf die Bilder klicken, diese werden z.B. mit einem Rahmen markiert o.ä. und können dann an ein Script weitergegeben werden...
 
Werbung:
Das ist ein einfacher AJAX-Request. Beim Klick auf ein Bild lässt sich bsw. dessen src-Attribut per POST oder GET an dein PHP-Script weiterreichen.
 
Ungefähr so:

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
<!--
.checkbox { display: none; }
-->
</style>
<script type="text/javascript">
function toggleBorder(id) {
  var imgName = "img" + id;
  var checkboxName = "check" + id;
  if (document.getElementById(imgName).style.borderColor == 'white')
  {
    document.getElementById(imgName).style.borderColor = 'red';
    document.getElementById(checkboxName).checked = true;
  }
  else
  {
    document.getElementById(imgName).style.borderColor = 'white';
    document.getElementById(checkboxName).checked = false;
  }
}
</script>
</head>
<body>
<form method="post" action="<?php echo $_SERVER['SCRIPT_NAME']; ?>">
  <a href="javascript:toggleBorder('1')"><img style="border: 3px solid white" id="img1" src="xx.jpg"></a>
  <input class="checkbox" type="checkbox" name="check[1]" id="check1" value="xx.jpg">
  <a href="javascript:toggleBorder('2')"><img style="border: 3px solid white" id="img2" src="yy.jpg"></a>
  <input class="checkbox" type="checkbox" name="check[2]" id="check2" value="yy.jpg">
  <input type="submit" name="submit" value="Los">
</form>
<?php
if (isset($_POST['check']))
  print_r($_POST['check']);
?>
</body>
</html>
 
Werbung:
Tronjer schrieb:
Das ist ein einfacher AJAX-Request. Beim Klick auf ein Bild lässt sich bsw. dessen src-Attribut per POST oder GET an dein PHP-Script weiterreichen.
Zum Vergrößern anklicken....
Stimmt, das ist eine einfache Lösung. Daran habe ich gar nicht gedacht. Andererseits brauche ich in einem Fall auch die Möglichkeit die Werte (z.B. eine ID oder Dateiname) der ausgewählten Dateien weitergeben zu können. Dazu muss ich erst mal eine Auswahl treffen können um diese abzuschicken.

@bdt600: Danke für die Idee mit den versteckten Checkboxen. Muss man denn überhaupt das Bild verlinken? Ich würde das eher mit JS/JQuery so lösen, dass bei Klick auf ein Bild dieses eine Klasse bekommt (zur optischen Darstellung) und gleichzeitig die dazugehörige Checkbox ausgewählt wird. Quasi mit einem click-event.
 
Zuletzt bearbeitet:
Stimmt, das ist eine einfache Lösung. Daran habe ich gar nicht gedacht. Andererseits brauche ich in einem Fall auch die Möglichkeit die Werte (z.B. eine ID oder Dateiname) der ausgewählten Dateien weitergeben zu können. Dazu muss ich erst mal eine Auswahl treffen können um diese abzuschicken.
Zum Vergrößern anklicken....

Die Auswahl geschieht durch den Klick, damit lässt sich jeder Teil deiner HTML-Datei in einer Variablen ablegen und/oder per POST versenden. Im Gegensatz zum PHP-Ansatz ist hier noch nicht mal ein Formular mit Submit-Button notwendig.

Was genau willst du denn tun, eine Checkbox markieren, worauf das dazugehörige Bild eine CSS-Klasse erhält und dessen ID per POST versendet wird?

btw. und nimm nicht das Beispiel von bdt600 als Vorlage. Inline-JavaScript ist heutzutage ebenso ein no-go wie Framesets oder Tabellenlayout.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben