Symbole anstatt Checkboxen

lima-city → Forum → Programmiersprachen → PHP, MySQL & .htaccess

Autor dieses Themas
safeyourface

safeyourface hat kostenlosen Webspace.
12:50, 5.5.2012
Hallo!

Ich will mehrer kleine Symbole nebeneinander haben. Diese Symbole sollen aktivierbar bzw. deaktivierbar sein. Ich stelle mir das wie Checkboxen vor. Nur anstatt der Checkbox soll halt dieses Symbol da sein. Wenn man da drauf klickt wird es aktiviert. Wenn es aktiviert ist, soll es normal aussehen und wenn nicht, soll zum Beispiel die Deckkraft runter gehen. Wenn es also deaktiviert ist, soll mit
```
unset();
```
ein Bild aus einem Array gelöscht werden.

Ist sowas möglich? Habt ihr verstanden wie ich das meine? Freue mich über Hilfe!

Liebe Grüße
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
hackyourlife

Moderator

hackyourlife hat kostenlosen Webspace.
13:09, 5.5.2012
safeyourface schrieb:
Wenn es also deaktiviert ist, soll mit
```
unset();
```
ein Bild aus einem Array gelöscht werden.

... Habt ihr verstanden wie ich das meine?
Nicht ganz verstanden.....

safeyourface schrieb:
Ich will mehrer kleine Symbole nebeneinander haben. Diese Symbole sollen aktivierbar bzw. deaktivierbar sein. Ich stelle mir das wie Checkboxen vor. Nur anstatt der Checkbox soll halt dieses Symbol da sein.
...
Ist sowas möglich?
Das ist natürlich möglich...

Brauchst du (Beispiel-)Code?
Autor dieses Themas
safeyourface

safeyourface hat kostenlosen Webspace.

13:15, 5.5.2012
Also wie du vielleicht weißt, habe ich ein Script, welches mir Zufallsbilder aus einem Ordner ausgibt. Die Symbole die ich meine, sollen diese Zufallsbilder nur in klein sein. Und wenn man ein Symbol deaktiviert, soll dieses Bild nicht mehr in dem Ordner bzw Array sein. Man soll also die Bilder auswählen können, welche als Zufallsbild erscheinen dürfen. Und am Besten wäre es, wenn es dann noch eine Funktion gibt, die sagt, dass mindestens 3 Bilder aktiviert sein müssen. Ein Beispielcode wäre nett :)

Moderator

13:42, 5.5.2012

safeyourface schrieb:
Und am Besten wäre es, wenn es dann noch eine Funktion gibt, die sagt, dass mindestens 3 Bilder aktiviert sein müssen. Ein Beispielcode wäre nett :)

Also mal Beispielcode:

<p>Time: <?php echo(date('H:i:s')); ?></p>
<?php

$images = array(); // hier stehen die Bilder drin
$dir = '.';
$handle = opendir($dir);

while(($daten = readdir($handle)) !== false) {
	if(preg_match('/\.(jpe?g|gif|png)$/i', $daten)) {
		$images[] = $daten;
	}
}
closedir($handle);


$status = array(); // ausgewählt oder nicht?

// Standardmäßig sind alle ausgewählt
foreach($images as $image)
	$status[$image] = true;

// Wenn per Post daten gekommen sind...
if(isset($_POST['json']))
	$status = get_object_vars(json_decode($_POST['json']));

?>
<script type="text/javascript"><!--
	var status = <?php echo(json_encode($status)); ?>;

	function toggle(name) {
		var element = document.getElementById(name);
		status[name] = !status[name];
		element.style.opacity = status[name] ? 1.0 : 0.25;
	}

	function encode(id) {
		var count = 0;
		for(var value in status)
			if(status[value])
				count++
		if(count < 3) {
			alert('Select at least 3 images!');
			return false;
		}
		var element = document.getElementById(id);
		element.value = JSON.stringify(status);
		return true;
	}
// --></script>

<?php

// anklickbare Bilder ausgeben
foreach($images as $image) {
	$opacity = $status[$image] ? 1.0 : 0.25;
	echo("<img src=\"$image\" id=\"$image\" style=\"opacity: $opacity;\" onclick=\"toggle('$image');\" />");
}

?>
<form method="post" onsubmit="return encode('json');">
	<input type="hidden" name="json" id="json" value="" />
	<input type="submit" name="submit" value="submit" />
</form>

Das Script lässt dich Bilder auswählen...
Standardmäßig sind alle Bilder ausgewählt, beim Klicken wird der Zustand gewechselt. Nicht ausgewählte Bilder sind 75% durchsichtig.

Es ist nicht möglich weniger als 3 Bilder auszuwählen, sollte das der Fall sein und man möchte es abschicken kommt eine Fehlermeldung.

Die Daten welche Bilder jetzt ausgewählt sind bekommst du als JSON-String in

$_POST['json']

, das kannst du dann auswerten.

Du wirst warscheinlich die Bilder noch alle skalieren wollen, das ist hier nicht im Script enthalten.

Autor dieses Themas

safeyourface

safeyourface hat kostenlosen Webspace.

14:06, 5.5.2012

Super danke! Kannst du das vielleicht noch an mein Script anpassen?

Also die Bilder hier ist der Zufallsscript:

//Ordner
$ordner="images/zufallsbilder";

//Bildtypen
$typen= array("gif","jpg","jpeg","png");;

//Bilder auslesen
$verzeichnis = opendir($ordner);
$bilder = array();
while($datei = readdir($verzeichnis)) {

//Dateiendung rausfiltern
$datei_endung = substr( strrchr($datei,".") ,1);
if(in_array($datei_endung, $typen)) {
$bilder[] = $datei;
}
}
//Verzeichnis schließen
closedir($verzeichnis);

//Zufälliges Bild aus Array suchen
srand ((double) microtime() * 10000000);
$key = array_rand($bilder);

//Name ohne Dateiendung
$filename = "{$bilder[$key]}";
$bildname = explode(".",$filename);


//Bild ausgeben:
echo '<img src="'.$ordner."/".$bilder[$key].'" alt="Zufallsbild" width="94" height="94" title="'.$bildname[0].'">';

Und wenn ich bei deinem Script auf "submit" klicke, kommt folgende Meldung:

Warning: get_object_vars() expects parameter 1 to be object, string given in C:\xampp\htdocs\spielen.php on line 739

hackyourlife

Moderator

hackyourlife hat kostenlosen Webspace.

14:33, 5.5.2012

safeyourface schrieb:
Super danke! Kannst du das vielleicht noch an mein Script anpassen?

Schau mal ob es dir so gefällt... sonst musst du es halt selber anpassen ;-)

<!DOCTYPE html>

<html>
	<head>
		<title>Random Images</title>
	</head>
	<body>
<?php

// get images
$images = array();
$directory = 'images/zufallsbilder';
$handle = opendir($directory);

while(($file = readdir($handle)) !== false) {
	if(preg_match('/\.(jpe?g|gif|png)$/i', $file)) {
		$images[] = $file;
	}
}
closedir($handle);


$status = array();
foreach($images as $image)
	$status[$image] = true;

if(isset($_POST['json'])) {
	$status = get_object_vars(json_decode($_POST['json']));

	$available = $status;
	foreach($available as $name => $value)
		if(!$value)
			unset($available[$name]);

	//Zufälliges Bild aus Array suchen
	$filename = array_rand($available);

	//Name ohne Dateiendung
	$info = pathinfo($filename);
	$imgname = $info['filename'];
	echo('<p>Random Image</p>');
	//Bild ausgeben:
	echo("<img src=\"$directory/$filename\" alt=\"Zufallsbild\" width=\"94\" height=\"94\" title=\"$imgname\" />");
} else {

?>
<script type="text/javascript"><!--
	var status = <?php echo(json_encode($status)); ?>;

	function toggle(name) {
		var element = document.getElementById(name);
		status[name] = !status[name];
		element.style.opacity = status[name] ? 1.0 : 0.25;
	}

	function encode(id) {
		var count = 0;
		for(var value in status)
			if(status[value])
				count++
		if(count < 3) {
			alert('Select at least 3 images!');
			return false;
		}
		var element = document.getElementById(id);
		element.value = JSON.stringify(status);
		return true;
	}
// --></script>
<p>Select Images</p>
<?php

foreach($images as $image) {
	$opacity = $status[$image] ? 1.0 : 0.25;
	echo("<img src=\"$image\" id=\"$image\" style=\"opacity: $opacity;\" onclick=\"toggle('$image');\" />");
}

?>
<form method="post" onsubmit="return encode('json');" accept-charset="utf-8">
	<input type="hidden" name="json" id="json" value="" />
	<input type="submit" name="submit" value="submit" />
</form>
<?php
}
?>
</body>
</html>

safeyourface schrieb:
Und wenn ich bei deinem Script auf "submit" klicke, kommt folgende Meldung:

Warning: get_object_vars() expects parameter 1 to be object, string given in C:\xampp\htdocs\spielen.php on line 739

Du verwendest den Internet Explorer?
Der Fehler liegt daran, dass der IE sich falsch verhält weil er kein gültiges HTML-Dokument mit DOCTYPE findet... das sollte jetzt auch behoben sein.

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city