Entwickler-Ecke

Sonstiges (Web-Entwicklung) - Umgang mit Hintergrundgrafiken


Delete - Do 16.02.17 03:20
Titel: Umgang mit Hintergrundgrafiken
Um Hintergrundgrafiken wechseln zu können, benutze ich ein Form, in das ich eine Liste vorhandener Grafiken einlese. Diese können dann per JavaScript geändert werden.



PHP-Quelltext
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
<?php
$dateiliste = array();
$backpath = ""// muß je nach Anwendung eingetragen werden

function allfromdir($path,$match) {
global $dateiliste;
if ( is_dir ( $path ))  // Ist es ein Verzeichnis ?
  {
  if ( $handle = opendir($path) ) // Verzeichnis öffnen
    {
    while (($file = readdir($handle)) !== false)  // Verzeichnis einlesen
    {
    if (preg_match($match,strtolower($file)) && $file != "." && $file != ".."// nur gültige Einträge nehmen
      {
        $dateiliste[] = trim($file);
      }
    }
    closedir($handle);
    }
  }
}
?>



Cascading Style Sheet
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
<script type="text/javascript">
function zeigeBild(sel) {
pic = sel.options[sel.selectedIndex].value;
document.getElementById('body').style.backgroundImage = "url("+pic+")";
}
</script>
<style type="text/css">
body { margin:0border:0padding:0height:100%max-height:100%font-family:arial, verdana, sans-serif; overflow: hidden; background: transparent; background-attachment:fixed;}

#backselectform { padding2px; }

#backselect { width:200pxfont-size12pxpadding:1pxmargin:0cursor: pointer; background-color: orange; font-weight: bold; font-size16pxborder: none; }
#backselect option:hover {background:aqua;}
</style>



HTML-Dokument
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
<?php
allfromdir($backpath,"(bmp|gif|ico|jpg|png)");
?>

<div style="position: absolute; top:80px; left:0px; width:200px;
overflow-x:hidden; overflow-y:hidden;"
>

<form id="backselectform" name="backselectform" target="" method="GET" action="content.php">
<select id="backselect" name="backselect" size="20" onChange="zeigeBild(this)" title="Hintergrundgrafik auswählen">
<?php
foreach ($dateiliste as $value)
{
  echo'<option value="'.$backpath.$value.'">'.$value.'</option>';
}
?>

</select>
</form>
</div>


Damit das funktioniert, muß für $backpath ein gültiges Verzeichnis mit geeigneten Grafiken angegeben werden. Außerdem muß der Body-Teil des HTML statt nur "<body>" zusätzlich die benötigte id enthalten, also "<body id="body">" im Beispiel.

Ich hoffe, die Fragmente sind soweit verständlich, denn das ist alles in ein sehr komplexes Programm integriert.

Mein Anliegen: Ich möchte mit php den Namen der selektierten und aktiven Hintergrundgrafik ermitteln, um diese zum Download anbieten zu können. Das Problem dabei ist, daß ich nicht weiß, wie ich entweder mit php das Value der selektierten Option ermitteln kann oder es aus der JavaScript-Funktion heraus übergeben kann.

Woher ich die Funktion "ZeigeBild" habe, weiß ich nicht mehr. Ich benutze den Schnipsel zwar schon seit Jahren, kann aber die eigentliche Funktionsweise nicht analysieren. Am liebsten wäre mir dabei, wenn das statt mit JavaScript auch mit php möglich wäre. Aber ich habe keine Ahnung, wie man onChange, onClick, onMouseOver etc. an was anderes als an JavaScripte übergeben kann.

Falls jemand zufällig eine funktionierende Idee hat, würde ich mich freuen, diese vermittelt zu bekommen. Es eilt aber nicht.

Falls die Codeschnipsel nicht reichen, würde ich bei Gelegenheit "from the scratch" ein kleines Beispielprogramm mitsamt Grafiken zusammenstellen und hochladen.


hydemarie - Do 16.02.17 13:23

Nein, du kannst mit einer serverseitigen Programmiersprache wie PHP den Inhalt des Clients (Browsers) nach dem Rendern einer Seite nicht mehr ändern, ohne dass er selbst irgendwelchen Code ausführt oder die Seite neu lädt. Der Browser kann in den meisten Fällen nur in Javascript programmiert werden. Das schränkt die Wahl der Sprache schon ziemlich ein.

Die Funktion zeigeBild() macht Folgendes:


JavaScript-Quelltext
1:
pic = sel.options[sel.selectedIndex].value;                    


Setze die Variable pic auf den Wert des ausgewählten (selectedIndex) Eintrags in der Selectbox, die du als Parameter der Funktion übergeben hast (sel), und ...


JavaScript-Quelltext
1:
document.getElementById('body').style.backgroundImage = "url("+pic+")";                    


... setze das Hintergrundbild des body-Seitenelements auf den CSS-URL aus dieser Variablen. Dass das unfassbar fehleranfällig ist, muss ich dir wahrscheinlich schon nach dieser Erklärung nicht mehr sagen ... :)

Zu deinem Problem: Dein PHP-Script kann nicht "sehen", was der Besucher im Browser so anstellt, denn es funktioniert, wie gesagt, ausschließlich serverseitig. Du müsstest also schon beim Wechsel des Bildes dem PHP-Script mitteilen, welches Bild gerade geladen wurde, und z.B. diese Information in der Benutzersitzung speichern:


JavaScript-Quelltext
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
function zeigeBild(sel) {
    // ...

    // Bild im Hintergrund an PHP schicken:
    var r = new XMLHttpRequest();
    r.open("POST""ajaxscript.php"true); // Pfad ändern, natürlich! ;-)
    r.onreadystatechange = function () {
        if (r.readyState != 4 || r.status != 200return;
        // Hier könntest du noch irgendwas loggen, wenn du möchtest.
    };
    r.send("bild="+pic);
}


ajaxscript.php:


PHP-Quelltext
1:
2:
3:
4:
5:
6:
7:
8:
<?php
session_start();
if ($_POST["bild"] != null) {
    $_SESSION["userbild"] = $_POST["bild"];
}

// Jetzt ist in der Benutzersession jeweils die Adresse des aktuellen Bildes gespeichert.
?>


Haftungsausschluss: Ich habe gerade keine Möglichkeit, das zu testen, sollte aber so ähnlich funktionieren. Für die Validierung sämtlicher irgendwo übergebenen Parameter solltest du aber schon dringend sorgen - kleine Zusatzaufgabe. ;)


Delete - Do 16.02.17 16:25

Hallo ! Das war aber eine schnelle Antwort. Danke erstmal !!!

Bei Gelegenheit werde ich den Lösungsvorschleg ausprobieren. Die Kontrolle, ob das jeweils zu ladende Bild auch wirklich existiert, habe ich eigentlich vorgesehen. Was sonst könnte denn sonst noch daran unsicher sein?

Vor allem wundert mich der Hinweis die Methode wäre unfassbar fehleranfällig. Ich habe diese JavaScript-Grundstruktur aus fremder, unbekannter Quelle schon mehrere Jahre in Benutzung und hatte nie Probleme damit. Vielleicht sollte ich dazu noch erwähnen, daß ich im Programm natürlich erst auswerte, ob JavaScript überhaupt aktiviert ist. Wenn nicht, wird die ganze
Prozedur gar nicht erst angezeigt. Ich werde heute abend mal ein kleines Beispielprogramm hochladen. Vorher werde ich mich am Lösungsvorschlag versuchen und einbauen, falls er funktioniert.

Nochmals vielen Dank !

Nachtrag:
Nachdem ich mir den Vorschlag inhaltlich durchsah: Ich habe dabei einiges nicht verstanden:

r.open("POST", "ajaxscript.php", true); // Pfad ändern, natürlich! ;-)

Was ist dieses "ajaxscript.php" ? Woher bekomme ich es ? Oder soll da der Name des Programms hin ?

Was ist mit der Variablen "userbild" in der Zeile

$_SESSION["userbild"] = $_POST["bild"];


hydemarie - Do 16.02.17 16:31

Denkanstoß: Was macht denn deine Funktion, wenn ein böswilliger Zeitgenosse per F12 deine Selectbox einfach ändert? Klar, das Schlimmste, was passieren kann, ist, dass dann halt kein Bild gesetzt wird - aber was, wenn du es ausliefern willst? Du solltest zumindest PHP-seitig prüfen, ob die Datei in deinem Bilderverzeichnis existiert, bevor du den Wert weiterverarbeitest. Sonst könnte zum Beispiel auch jemand versuchen, deine /etc/passwd herunterzuladen. :)


Delete - Do 16.02.17 16:37

Oh, als ich meinen Beitrag nochmal editiert habe, kam schon eine Antwort. Damit hätte ich nicht gerechnet.

Was ist mit F12 ? Das verstehe ich nicht. Es handelt sich um den Plan eines offenes Projektes, sonst würde ich ja nicht auf die Idee kommen, die Hintergrundbilder zum Download anbieten zu wollen. Die Vorschau soll ja "nur" dazu dienen, daß man das Aussehen gleich am Stück sieht und nicht den kleinen Ausschnitt. Denn viele Hintergrundgrafiken sind gar nicht für endloses Aneinanderreihen geeignet. Das war ja ursprünglich auch anfangs nur für mich selbst der Anlaß, etwas zu suchen, das mir die Gesamtwirkung zeigt und einen schnellen Wechsel "on the fly" ermöglicht.

Und wie berets erwähnt: Ich prüfe, ob die Grafik überhaupt existiert, denn die vorhandenne Bilder werden ja dynamisch eingelesen. Was nicht da ist, kommt gar nicht erst in die Liste. Gut, ich könnte vielleicht noch die Bildgröße und evtl. den Dateikopf prüfen, um auszuchließen, daß es sich vielleicht um eine falsch benannte Datei handelt. Alles was keine gültiges Bild ist, soll gar nicht erst in Liste.


hydemarie - Do 16.02.17 16:43

user profile icondelnu hat folgendes geschrieben Zum zitierten Posting springen:
r.open("POST", "ajaxscript.php", true); // Pfad ändern, natürlich! ;-)

Was ist dieses "ajaxscript.php" ? Woher bekomme ich es ?


Aus meinem Beitrag. Da kann dann auch dein Auslieferungscode rein, wenn du willst.

user profile icondelnu hat folgendes geschrieben Zum zitierten Posting springen:
Was ist mit der Variablen "userbild" in der Zeile

$_SESSION["userbild"] = $_POST["bild"];


Das ist eine Sessionvariable, der Server merkt sich darüber, was der Benutzer zuletzt ausgewählt hat. Wie gesagt: Was im Browser passiert, musst du dem Server auch sagen, sonst weiß er das nicht.

user profile icondelnu hat folgendes geschrieben Zum zitierten Posting springen:
Was ist mit F12 ? Das verstehe ich nicht.


Was in einer Selectbox drinsteht, entscheidet in letzter Instanz der Benutzer und nicht du. Dafür hat jeder halbwegs moderne Browser eine eingebaute Funktion, i.d.R. über F12 zu erreichen. Das heißt: Du kannst dich niemals darauf verlassen, dass in der Selectbox ein valider und ungefährlicher Wert drinsteht.


Delete - Do 16.02.17 17:01

Na gut, ich habe es gerade mal mit F12 probiert. Da zeigt mir firebug dann den generierten HTML-Code. Wie daraus jemand etwas manipulieren könnte, ist mir aber unklar. Man könnte den Quellcode nachzubasteln versuchen - na und ?

Was das "ajaxscript.php" betifft: Soll ich das dann als zusätzliches Script in meinen Quellcode integrieren?

Ich hänge jetzt doch jetzt schon einfach mal mein vorige Nacht noch auf die Schnelle gebasteltes Minimalbeispiel jetzt schon hier dran, statt erst heute abend. Ich habe aber gleich noch einen Termin und bin dann erstmal weg.


hydemarie - Do 16.02.17 17:08

user profile icondelnu hat folgendes geschrieben Zum zitierten Posting springen:
Na gut, ich habe es gerade mal mit F12 probiert. Da zeigt mir firebug dann den generierten HTML-Code.


Firebug erlaubt dir auch eine Manipulation des angezeigten Codes. :)

user profile icondelnu hat folgendes geschrieben Zum zitierten Posting springen:
Was das "ajaxscript.php" betifft: Soll ich das dann als zusätzliches Script in meinen Quellcode integrieren?


Kannst du machen. Wie das am Ende heißt, ist einigermaßen schnuppe. Nur der AJAX-Request muss halt funktionieren.


Delete - So 19.02.17 11:56

Ich bin jetzt mal dazu gekommen, die Vorschläge einzubauen. Aber damit kann ich leider nichts anfangen. Ich habe jetzt zwar ein Cookie (also etwas, das ich bei meinen Programmen gar nicht will) aber was sich hinter dessen (anscheinend nicht einmal selbst festlegbarem) Cookie-Namen "PHPSESSID" verbirgt und wie man dann darauf zugreift und das nutzen soll, bleibt mir ein Rätsel.

Trotzdem Danke für die Mühe. Ich werde das Problem anders zu lösen versuchen, vielleicht durch Zwischenschalten eines iframes und Auslagerung der Auswahlfunktion. Das Speichern des jeweils aktuellen Hintergrundes funktioniert, wenn er beispielsweise bereits vor dem Programmstart durch Zufallsgenerator festgelegt wird. Darum kam mir dann erst nachträglich der Gedanke, es wäre schön, eben auch vorher gezielt auswählen zu können.

Tipps anderer lassen sich nur dann vernünftig einsetzen, wenn man die Funktionsweise versteht bzw. sich ein nachvollziehbarer Erfolg einstellt. Solange ich also nicht mehr weiß, muß ich bei dem bleiben, was ich nachvollziehen kann.

Vielleicht bin ich in ein paar Monaten weiter.

Was die Manipulierbarkeit des Codes mit Firebug betrifft, so kann mir das doch eigentlich egal sein, weil es keine Auswirkungen auf den Code auf dem Server hat. Oder täusche ich mich ?


jfheins - So 19.02.17 12:28

Es gingen hier (gefühl) ein paar Sachen durcheinander. Vielleicht zurück zu deinem eigentlichen Anliegen:
Zitat:
Mein Anliegen: Ich möchte mit php den Namen der selektierten und aktiven Hintergrundgrafik ermitteln, um diese zum Download anbieten zu können. Das Problem dabei ist, daß ich nicht weiß, wie ich entweder mit php das Value der selektierten Option ermitteln kann oder es aus der JavaScript-Funktion heraus übergeben kann.


Du hast also in einem Verzeichnis diverse Dateien und man kann sich daraus den gewünschten Hintergrund aussuchen. OK.
Das "zum Download anbieten" kann jetzt aber grundsätzlich auf zwei Arten passieren:

1. Du erzeugt clientseitig mit Javascript einen Link, der auf diese Datei verweist. Vorteil: Schnell, Sicher, Einfach.
Nachteil: Der Server bekommt nicht mit, was der Benutzer jetzt ausgewählt hat. Wenn du wirklich nur das Bild zum Download anbieten möchtest, reicht das. Aber wenn quasi der Hintergrund der Webseite beim nächsten Mal dem entsprechen soll, dann muss der Server das ja irgendwo speichern.

2. Du sendest die Information zurück an den Server und empfängst sie dort mit einem PHP-Skript. Vorteil: Du kannst serverseitig was mit der Information machen.
Nachteil: Du musst dir mehr Gedanken um die Sicherheit machen, du musst den empfangenen Pfad validieren bevor du die Datei rausgibst.

Möglichkeit 2 geht nun entweder durch absenden des Formulars oder per AJAX Request.

Falls ich da jetzt was falsch verstanden habe, wäre eine bessere Fehlerbeschreibung gut. Also was funktioniert schon, was soll funktionieren, was hast du probiert und was tut es stattdessen?

Ein bisschen Off-Topic:
user profile iconhydemarie hat folgendes geschrieben Zum zitierten Posting springen:
... setze das Hintergrundbild des body-Seitenelements auf den CSS-URL aus dieser Variablen. Dass das unfassbar fehleranfällig ist, muss ich dir wahrscheinlich schon nach dieser Erklärung nicht mehr sagen ... :)

Was ist daran fehleranfällig? Der Pfad wird passend übermittelt, die URL ist relativ, es werden nur Bilder gezogen und der Pfad ist hartkodiert. Mir fällt jetzt momentan kein Fall ein, wie es nicht funktionieren würde.


jaenicke - Mo 20.02.17 05:25

user profile iconhydemarie hat folgendes geschrieben Zum zitierten Posting springen:
Nein, du kannst mit einer serverseitigen Programmiersprache wie PHP den Inhalt des Clients (Browsers) nach dem Rendern einer Seite nicht mehr ändern, ohne dass er selbst irgendwelchen Code ausführt oder die Seite neu lädt. Der Browser kann in den meisten Fällen nur in Javascript programmiert werden. Das schränkt die Wahl der Sprache schon ziemlich ein.
Es gibt aber Tools wie uniGUI oder Raudus, die ein visuelles Designen in der Delphi IDE inkl. OnClick usw. bieten und das alles in Delphi Code auf dem Server behandeln und die Änderungen an der GUI automatisch zurück schieben.

Wenn man nicht viel JavaScript aber Delphi kann, ist das eine interessante Alternative.

Ich vermute, dass es das auch für andere Sprachen bzw. IDEs gibt, das kenne ich aber nicht.


hydemarie - Mo 20.02.17 10:12

Das klingt furchtbar unpraktisch.


Delete - Mo 20.02.17 12:35

Danke erstmal für die neuen Antworten !

Zunächst mal zur Sicherheit: Es geht bei mir um eine Website mit internen Verlinkungen per iframe zu anderen Websites, also eine Art vereinfachter Lesezeichen mit selektieren Inhalten. Durch die Kapselung in iframes ist schon mal direkte Manipulation von aussen schwerig. Als eigene Leistung will ich zusätzlich einige Sachen zum Download anbieten, so z.B. "seemless"-Hintergründe. Auch das geschieht gekapselt in einem iframe.


@jfheins: Bisher habe ich 2 Möglichkeiten: Entweder wird das aktuelle Hintergrundbild als Zufallsgrafik per php beim Aufbau der (integrierten) geladen. Dann kann diese Grafik abgespeichert werden, aber der Nutzen kann sich die Garfik vorher nicht auswählen. Die andere (hier vorgestellte) Möglichkeit ist, daß der Nutzer zwar per JavaScript einen "background" wählen kann, dieser aber nicht gespeichert werden kann, weil die Rückmeldung an den Server fehlt.

Mittlerweile stelle ich mir eine Lösungsmöglichkeit so vor, daß ich vielleicht die auszuwählende Grafik irgendwie nicht als echten "background" setze, sondern nur einfach mehrfach neben- und untereinander z.B. in einem div- oder span- Bereich. Dann bliebe aber dennoch die Frage der Kommunikation mit dem Server, was die Auswahl betrifft. Ich müßte vielleicht irgendwas finden, das per "<a href" die in Frage kommenden Grafiken listet.

Oder wie kann ich es mit php ermöglichen, eine Auswahlliste zu erstellen ?


hydemarie - Mo 20.02.17 12:49

user profile icondelnu hat folgendes geschrieben Zum zitierten Posting springen:
Oder wie kann ich es mit php ermöglichen, eine Auswahlliste zu erstellen ?


Tust du doch schon? :gruebel:


Delete - Mo 20.02.17 16:02

Nein, die Liste wird in einem HTML-Bereich <form> ... </form> erzeugt.

Ich meinte wirklich eine reine PHP-Liste. Klar, ich könnte alle Namen der verfügbaren Grafiken mit "echo" ausgeben, aber dadurch wären sie noch nicht anklickbar.


hydemarie - Mo 20.02.17 16:04

Im Browser muss HTML ankommen. Ob du das per echo() oder sonstwie zusammenbaust, ist dem Browser ja jetzt erst mal egal.


Delete - Di 21.02.17 06:13

Ich hatte das unklar ausgedrückt. Gemeint war eine mit php erzeugte, anklickbare Liste. Im Gegensatz zu der, die bei Klicks eine JavaScript-Funktion aufruft.

Wenn ich eine Auswahlliste mit reinem php hätte, könnte ich nämlich das Ergebnis gleichermaßen dafür benutzen, eine Grafik zu laden (egal wie oft ich die dann zu Demostrationszwecken über- unter- nebeneinander setze) als auch einen Downloadlink drauf setzen.

Ich habe bisher immer nur was mit <form> ... </form> gefunden und das funktioniert hier eben nicht wie gewünscht.

Es eilt aber nicht. FALLS ich selbst was rausfinde, werde ich es natürlich posten.


jaenicke - Di 21.02.17 08:08

user profile icondelnu hat folgendes geschrieben Zum zitierten Posting springen:
Gemeint war eine mit php erzeugte, anklickbare Liste. Im Gegensatz zu der, die bei Klicks eine JavaScript-Funktion aufruft.
Du willst ja etwas machen, wenn die Liste angeklickt bzw. der Eintrag geändert wird. Und dafür gibt es im Browser nur JavaScript.

Du kannst auch ein Formular erstellen und mit einem Button darin dieses Formular an den Server schicken. Das geht ohne JavaScript. Dann passiert aber auch erst etwas, wenn das Formular abgeschickt und die Seite neu geladen ist.

Aber was ist denn das Problem bei JavaScript? Damit kannst du das Bild doch sowohl als Hintergrund setzen als auch an den Server schicken, dass diese Einstellung geändert wurde.


Delete - Di 21.02.17 09:50

Ich fand keine Möglichkeit, beides zu machen.

Die Seite würde ja schon dann erneut geladen, wenn ich die Funktion zum Speichern der Grafik einbaue. Wenn ich also mittels JavaScript dann ebenfalls die Seite neu aufrufe, schließt sich doch beides wieder aus. Wenn ich es in einem einzigen Aufruf, also mit nur einem "form"-block statt mit zweien realisieren könnte, wäre allerdings die ganze Umständlichkeit ohnehin unnötig.

Ich muß dazu erwähnen, daß ich Methode zum Speichern hier gar nicht erst zuätzlich gepostet habe, weil die für sich gesehen ja funktioniert. Das Problem ist die Auswahl anstelle einer Zufallsgrafik beim Start. Der nicht funktionierende Kompromiss zwischen beidem ist zu sehen unter http://freelinks.usa.cc/random/

Beim Start wird eine Zufallsgrafik erzeugt, die sich abspeichern läßt. Danach lassen sich nur noch Hintergründe auswählen und im rot umrandeten Feld bleibt der Hintergrund so zu sehen, wie er beim Start war. Das gilt auch für die Option zum Speichern und die Angaben zur Größe und Dateigröße.

Ich habe vorhin eine ganze Weile (lokal) getestet, ob sich was machen läßt, wenn ich mit normalen Links "<a href ...></a> arbeite. Dann kann ich zwar die Grafiken wechseln, aber als Variable fürs Speichern würde nicht die der angeklickten Grafik genommen, sondern die der letzten aufgelisteten. Das wird wiederum damit zusammenhängen, daß PHP ja letztlich nur "fertigen" HTML-Code erzeugt.

Ich lasse das jetzt erstmal. Es eilt ja nicht. Mit den Schnippseln von hydemarie bin ich jedenfalls nicht klargekommen. Das Einzige was ich davon hatte, war ein Cookie, aber ich benutze keine Cookies.


jaenicke - Di 21.02.17 17:36

Moment, ich glaube hier gibt es ein Missverständnis. Die Schnipsel oben zielten darauf ab auf dem Server die Information zu speichern welche Grafik der Benutzer ausgewählt hat.

Nach deinem Beispiel verstehe ich das jetzt so, dass du einfach quasi einen Downloadlink auf die ausgewählte Datei haben möchtest?

Dann muss lediglich die URL, die bei dem Klick auf den Download ausgelöst wird, geändert werden. Das wäre sehr einfach und rein per Javascript ohne ein Neuladen der Seite möglich. Meinst du das so?


Delete - Mi 22.02.17 02:33

Zitat:
Dann muss lediglich die URL, die bei dem Klick auf den Download ausgelöst wird, geändert werden. Das wäre sehr einfach und rein per Javascript ohne ein Neuladen der Seite möglich.

Und wie kann die URL geändert werden? Beim von mir gegegeben Link zum nicht wirklich funktionsfähigen Beispiel (darum ist es dort auch noch nicht im Menü) wird die URL zum Download bereits beim Laden der Seite aus der zu diesem Zeitpunkt erzeugten Zufallsgrafik ermittelt, denn nur dann ist deren Name bekannt. Er wird aus der Zufalls-Funktion erzeugt.

Der Rest (also letztlich das Einzige was ich hier zum NACHTRÄGLICHEN Auswählen und Ändern der Hintergrundgrafik gepostet hatte) ist was ganz anderes. Ich habe im verlinkten Beispiel zwei Sachen kombiniert, die eben (mit meinem derzeitigen Wissensstand) nicht aneinander angepaßt werden können.

Ich wollte ja hier erfahren, ob ich aus der JavaScript-Funktion irgendwie auch den Namen der Grafik an php übermitteln kann, uim ihn dann der Download-Funktion übergeben zu können.

Und zu diesem Zweck kam ich mit den Schnippseln von hydemarie nicht klar.

Mir geht es darum, bei der benutzerdefinierten Auswahl einer Grafik sowohl diese wenigstens soweit aneinander zu reihen, daß ein Eindruck über die zusammengesetzte Wirkung entstehen kann, als auch bei der Auswahl die Größe der Grafik und deren Dateigröße anzuzeigen, als auch letztlich natürlich den Download der ausgewählten Grafik zu ermöglichen.

Falls das wirklich so einfach sein sollte, dann wäre ein konkreter Vorschlag dazu extrem nützlich, denn meine Kenntnisse über JavaScript sind sehr gering. Bzgl. php weiß ich wenigstens, wo und wie ich im Internet suchen kann.


jaenicke - Mi 22.02.17 05:36

Versuche es mal damit. ;-)

JavaScript-Quelltext
1:
2:
3:
4:
5:
6:
7:
function zeigeBild(sel) 
{
  pic = sel.options[sel.selectedIndex].value;
  document.getElementById('body').style.backgroundImage = "url(" + pic + ")";
  document.getElementsByName('submit')[0].value = pic;
  document.getElementsByName('submit')[0].onmouseout = function() { this.value = pic };
}


Delete - Mi 22.02.17 06:14

Danke erstmal !

Das geht anscheinend immerhin schon in die richtige Richtung.

Beim Wechsel der Auswahl wird im Feld für den Downloadlink tatsächlich der korrekte Name angezeigt.

Allerdings muß ich das erstmal an meine Variablen anpassen, denn so erhalte ich im entsprechenden Feld
den kompletten Pfad. Der aber wird bei mir separiert, weil im Textfeld nur der Dateiname und nicht auch der Quellpfad erscheinen soll.

So wie es momentan nach Einbau Deines hilfreichen Vorschlags ist, wird dann beim Klick auf das Downloadfeld nämlich noch der Name der beim Start geladenen Grafik angeboten und nicht der aktiven.

Auch müßten dann noch einige andere Felder angepaßt werden.

Aber der Ansatz ist wohl völlig korrekt und wird mir weiterhelfen. Auf der Basis kann ich nun weiter experimentieren und dabei meine Kenntnise per "learning by doing" erweitern.

Vielen Dank !

Wenn ich es irgendwann komplett fertig hinbekommen habe, werde ich das hier hochladen.


jaenicke - Mi 22.02.17 06:24

Was ich persönlich beim Lernen sehr hilfreich fand (auch wenn andere es ablenkend finden) ist jQuery. Damit musste ich mich nicht mehr so viel darum kümmern wie ich an ein bestimmtes Element herankomme (getElementById usw.) und wie ich da Werte hereinbekomme usw.

Damals gab es noch mehr Browserinkompatibilität, deshalb war es da ohne komplizierter als heute. Trotzdem würde ich es auch heute gerne früh nutzen, wenn ich es noch einmal lernen müsste.

Die Funktionen sind auch sehr gut dokumentiert und selbst Animationen z.B. bei einer Größenänderung sind schnell gemacht.


Delete - Mi 22.02.17 08:00

Ich habe gerade mal gegoogelt, was jquery ist. Das ist also eine Bibliothek. Na gut, ich werde die mal bei Geölegenheit runterlasen. Aber sowas hilft ja nur, wenn es gut dokumentiert ist.

Weshalb ich mich aber jetzt eigentlich zurückmelde: Ich habe jetzt anhand Deiner Vorgaben weiter experimentiert und nun die für mich passenden Rückgaben erhalten. Das war einmal mit "substr" den Pfad vor dem kompletten Dateinamen rauszufiltern und das andere war der Zugriff auf ein "hidden"-Element, mit dem ich den Namen für die php-Variable $zufall übergebe.

Der Download funktioniert jetzt auch die gewünschte Weise. Ich habe das jetzt schon mal auf http://freelinks.usa.cc/random/ hochgeladen.

Bisher extrahiere ich den Pfad anhand der mir bekannten Länge des Names, möchte diese Länge aber der benutzten php-Variablen entnehmen, damit das auch noch bei möglicher Änderung des Pfades noch paßt.

Außerdem möchte ich, daß im Beispiel die Angaben zur Größe des jeweiligen Bildes und dessen Dateigröße ebenso wie auch das (mit rotem Rand umrahmte) Bild in Originalgröße bei der Auswahl gleichfalls aktualisiert werden.

Vielleicht finde ich auch noch irgendwann raus, wie das geht. Fertig bin ich damit jedenfalls noch nicht.

Jetzt brauche ich aber erstmal nach einer arbeitsreichen Nacht einige Stunde Schlaf.

Nochmal sehr vielen Dank für Deine wertvollen Hinweise !!!


jaenicke - Mi 22.02.17 09:26

user profile icondelnu hat folgendes geschrieben Zum zitierten Posting springen:
Ich habe gerade mal gegoogelt, was jquery ist. Das ist also eine Bibliothek. Na gut, ich werde die mal bei Geölegenheit runterlasen. Aber sowas hilft ja nur, wenn es gut dokumentiert ist.
Ja, die Dokumentation ist wirklich sehr gut:
https://learn.jquery.com/about-jquery/how-jquery-works/


hydemarie - Mi 22.02.17 09:35

Sich das lästige Verstehen von Grundlagen zu ersparen, indem man einfach Bibliotheken reinklebt, ist eine grauenvolle Idee.


Delete - Mi 22.02.17 10:11

Naja, weil ich doch noch nicht schlafen kann ...

Bisher habe ich nur relativ kleine Bibliotheken benutzt, aber schon die waren mir zu unübersichtlich. Würde ich sie inhaltlich bzgl. ihrer Funktionsweise verstehen, würde ich sie auf das mir Wesentliche dezimieren.

Ich sah auch shcon immer mal wieder riesige Bibliotheken eingebunden, die dann auch noch dermaßen übel komprimiert wurden, daß sie gar nicht lesbar sind.

Meiner Meinung nach kann man bei gut dokumentierten Bibliotheken immerhin versuchen, nur die Funktionen "nachzuempfinden", die man wirklich benötigt.

Wenn ich an die riesigen Librarys für Delphi denke wie z.B. Jedi, wird mir schon ganz übel. Sowas sind nur Speicherfüller, gerade weil alles miteinander verwoben ist und sich Einzelelemnte kaum nutzen lassen. Statt z.B. Standardbuttons anzuwenden, basteln sich die Leute zum Aufbauschen ihrer Sammlung einen unnötigen Haufen Zusatz zusätzlicher Komponenten.

Ich denke aber, daß man aus jquery vielleicht wirklich was lernen kann, wenn es dazu eine gute Dokumentation gibt. Ich werde mir das am Nachmittag mal näher ansehen. Grundlagen lassen sich durchaus auch anhand kurzer Beispiele erlernen. Anders würde ich das auch nicht machen wollen, denn große Bibliothen bauschen alles auf, was sich auch negativ auf Ladezeiten auswirken kann.


jaenicke - Mi 22.02.17 10:12

user profile iconhydemarie hat folgendes geschrieben Zum zitierten Posting springen:
Sich das lästige Verstehen von Grundlagen zu ersparen, indem man einfach Bibliotheken reinklebt, ist eine grauenvolle Idee.
Das Verstehen war gar nicht das Problem, aber ich habe mich damals mehr damit beschäftigt Elemente zu suchen als wirklich etwas damit zu machen. Wie gesagt war es damals durch die Browserweiche für getElementById usw. auch komplizierter. Wenn ich wie heute nur mit diesem Befehl weitergekommen wäre, wäre es natürlich einfacher gewesen.


hydemarie - Mi 22.02.17 10:19

user profile icondelnu hat folgendes geschrieben Zum zitierten Posting springen:
Bisher habe ich nur relativ kleine Bibliotheken benutzt, aber schon die waren mir zu unübersichtlich. Würde ich sie inhaltlich bzgl. ihrer Funktionsweise verstehen, würde ich sie auf das mir Wesentliche dezimieren.


Vielleicht wäre statt jQuery UmbrellaJS [https://umbrellajs.com/] eine interessante Sache für dich. Kann DOM und AJAX und ist nicht annähernd so groß wie jQuery.


Delete - Mi 22.02.17 10:32

Danke. Das werde ich mir dann auch mal ansehen. Aber jetzt brauche ich nach der langen Nacht wirklich erstmal Schlaf. :shock:


Delete - Do 23.02.17 04:51

Hallo !

Die wesentlichen Aufgaben habe ich gelöst und habe jetzt mal ein komplettes, funktionierendes Beispiel angehängt, das jeder beliebig ohne Quellenangaben ändern und erweitern darf.

Was mir nicht möglich war, ist die jeweilige Neuberechnung von Bildgröße und Dateigröße, so daß diese Ausgabe jetzt nur noch dann erscheint, wenn JavaScript abgeschaltet wurde und darum wirklich nur beim Start ein Zufallsbild erschitn. Bei aktivertem JavaScript ist deiser Text weg und dafür erscheint das (nur bei aktiviertem JavaScript sichtbare) Auswahlmenü.

Danke an alle, die sich an der Diskussion beteilgt haben und vor allem nochmal besonders großen Dank an jaenicke für die entscheidenden Hinweise.

Damit konnte ich jetzt auch den Themen-Status aus "Frage beantwortet" setzen.

Das fertige Beispiel ist als iframe (mit mehr Hintergrundgrafiken als in der angehängten ZIP-Datei) auf
http://freelinks.usa.cc/random/ eingebunden.


jaenicke - Do 23.02.17 07:35

user profile icondelnu hat folgendes geschrieben Zum zitierten Posting springen:
Was mir nicht möglich war, ist die jeweilige Neuberechnung von Bildgröße und Dateigröße
Das würde ich so machen:

JavaScript-Quelltext
1:
2:
3:
4:
5:
  var image = new Image();
  image.src = pic;

  // jetzt hast du
  image.width und image.height

Die Dateigröße ist nicht ganz so einfach...

Über jQuery sollte es eine Lösung geben:
http://stackoverflow.com/questions/16876804/getting-image-urls-file-size-of-remotely-loaded-images

Alternativ kannst du natürlich auch schlicht ein PHP-Skript auf dem Server über ein AJAX Request, das in dem Link auch verwendet wird, anfragen. Das kann dir die Dateigröße dann bequem am Server ermitteln.


Delete - Do 23.02.17 09:49

Wie ich gerade bemerkte, sind in meinem vorigen Beitrag viele Schreibfehler - wahrscheinlich Folge von Übermüdung. ber ich lasse die jetzt einfach mal so.

Mit Deinem Vorschlag erhalte ich aber nicht wirklich Breite und Höhe, sondern für beides 0.

JavaScript-Quelltext
1:
  alert(image.src+' = '+image.width+' * '+image.height);                    


Ich hatte einen anderen Ansatz, der aber nicht die Werte des aktuellen, sondern des vorigen Bildes liefert:


JavaScript-Quelltext
1:
2:
  alert(bild.src+' = '+
  document.getElementById("bild").width+' * '+document.getElementById("bild").height);


Aber unabhängig davon besteht das zweite Problem darin, die ermittelten Werte auch an HTML zurück zu liefern. Außerdem finde ich dieses "alert" höchst primitv, habe aber noch nichts Brauchbares gefunden, um mit JS überhsupt Text an HTML zu liefern.

Ein Ansatz, gleich die richtigen Werte zu haben, wäre diese beim Auslesen der Bildnamen ins Array auszuwerten und ebenfalls Array-mäßig zu speichern. Bloß müßte man das irgendwie zwischenspeichern, damit es nicht immer neu berechnet werden muß, sobald die Seite neu geladen wird, wie beispielsweise durch Drücken von F5.

Allerdings bin ich so, wie es jetzt ist, auch schon zufrieden und habe es darum "offiziell" ins Menü des Footers auf meiner Verlinkungs-Website aufgenommen. Die Bildgröße läßt sich ja deutlich durch den dicken roten Rahmen erkennen, lediglich die Dateigröße hätte Bedeutung.

Aber ich werde zu große Bild-Dateien ohnhin irgendwann aussortieren, weil dadurch auch der Seiteaufbau etwas verlangsamt wird.

Ha, ich habe jetzt eine ausreichende Möglichkeit gefunden, nämlich das title-Attribut.

Anstelle von


PHP-Quelltext
1:
2:
3:
4:
5:
<?php
foreach ($dateiliste as $value) {
  echo'<option value="'.$backpath.$value.'">'.$value.'</option>';
}
?>

benutze ich jetzt


PHP-Quelltext
1:
2:
3:
4:
5:
6:
7:
<?php
foreach ($dateiliste as $value) {
  $picfilesize = filesize($backpath.$value);
  $picsize = getimagesize($backpath.$value);
  echo'<option value="'.$backpath.$value.'" title="   '.$picfilesize.' Bytes   '.$picsize[0].' * '.$picsize[1].' Pixel   ">'.$value.'</option>';
}
?>

und habe damit Dateigröße und Bildformat ganz einfach in der Liste und die Informationen sind sogar schon ohne Anklicken als Hint vorhanden.


jaenicke - Do 23.02.17 19:05

Das title Attribut kannst du natürlich auch per Javascript auslesen.


Delete - Do 23.03.17 23:07

Zwar bin ich mit meinem Prog im Wesentlichen zufrieden, habe aber dennoch ein Problem, das die Optik etwas stört.

Um die jeweilige Grafik in der linken oberen Ecke besonders hervorzuheben, benutze ich einen 4 Pixel breiten roten Rahmen.

Mein Problem dabei: Der Rahmen wird nicht oben draufgesetzt (also von der Gesamtgröße abgezogen), sondern kommt außen dazu.

Das widerspricht meiner Meinung nach dem Box-Modell und ich habe eine Ahnung, wie sich das ändern läßt, denn auch mit margin und padding habe ich nichts erreichen können. Wenn ich die Grafik nach links und oben verschiebe (so daß die dortigen Rahmen nicht mehr sichtbar sind) stören zwar die untere und rechte Verschiebung weniger, aber dafür fehlt dann eben oben und links etwas.

Hat jemand einen Lösungsansatz, um den Rahmen tatsächlich auf und nicht außerhalb der Grafik zu setzen? Alternativ könnte ich die Grafik aufhellen, aber das wäre auch nicht unbedingt optimal.


jfheins - Do 23.03.17 23:43

Wenbn du schon "Box-Modell" in die Runde wirfst: https://wiki.selfhtml.org/wiki/CSS/Box-Modell#klassisches_Boxmodell
Height und Width geben also standardmäßig nur die Dimensionen des Inhalts an, Padding, Border und Margin kommen dann außen drum herum.

Die einfachste Lösung wird sein, mit CSS box-sizing: border-box; zu definieren. Das entspricht dann vermutlich eher dem, was du dir vorstellst ...?


Delete - Fr 24.03.17 03:27

Danke erstmal. Wahrscheinlich dachte ich beim Box-Modell an die Microsoft-Definition, die aber in dem Fall auch nicht greift.
Bei der Fragestellung hat sich ein Schreibfehler ergeben. Ich meinte NICHT "und ich habe eine Ahnung", sondern "und ich habe KEINE Ahnung".

Zwar habe ich mittlerweile eine andere Lösung gefunden, indem ich beim Hovern einfach den Rahmen verschwinden lasse, aber beim IE 6 beispielsweise (ich unterstütze in der Hinsicht auch "starrsinnige Leute") funktioniert das nicht.

Danke für den Tipp mit dem box-sizing. Ich werde das die Tage mal austesten.

Edit: Ich habe es doch jetzt noch ausprobiert. Das ist zwar ein interesssntes Konzept, funktioniert hierfür aber nicht, denn es ändern sich zwar die Abstände des Bildes, nicht aber des Rahmens. Auf diese Weise ist leider NICHT möglich, den Rahmen in einen Bereich INNERHALB des Bildes zu setzen. Er bleibt IMMER ausserhalb.

Weil sich die Bildgröße nie gleich bleibt, wüßte ich jetzt auch keinen Weg, wie beispielsweise durch ein darüber gelegtes DIV oder SPAN mit den Aussenmaßen des Bildes MINUS Rahmenbreite das Ziel erreicht werden könnte. Das Problem wäre für mich dabei die dynamische Berechnung.


Delete - Di 28.03.17 14:52

So, nun will ich nachdem mir einige Leute hier geholfen haben, mal allen das (vorläufig für längere Zeit) Endprodukt verfügbar machen. Vielleicht kann jemand was damit anfangen. :roll:

Nachtrag:
Aufgrund eines Hinweises habe ich die Datei download.php überprüft. Die Zeilen 3 und 4 müssen getauscht werden.

In der Datei content.php kann oberhalb der Liste mit den Namen der Grafiken auch noch der Name des jeweiligen Pfades angezeigt werden, sofern er nicht länger ist als die Breite des entsprechenden Anzeigebereichs (ca. 22 Zeichen).

Das gibt aber nur Sinn, wenn man wirklich mehr als ein Verzeichnis für die Grafiken nutzt. Zugriff auf andere Server ist dabei übrigens nicht möglich. Die Verzeichnisse müssen sich auf dem selben Server befinden.

Dazu kann vor
<form id="backselectform" name="backselectform" target="" method="GET" action="content.php">
beispielsweise
<span style="color:white; background:red; padding:6px; display:block; border:1px solid black;"><b><?php echo $backpath ?></b></span>
eingefügt werden.

zweiter Nachtrag
Die enthaltene Datei download.php war fehlerhaft. Bei wechselnden Pfaden für die Grafiken stimmten die Dateinamen nicht immer mit den Originalen überein und enthielten ggf. Bestandteile des Verzeichnissen, wobei dann "/" zu "_" umgewandelt wurde. Durch rekursive Auswertung bis zum letzten "/" werden jetzt eigentlicher Dateiname und Pfad korrekt ermittelt und voneinander getrennt. Außerdem habe ich nach einem Tipp von Christian C. die Auswertung der erlaubten Dateitypen optimieren können. Damit ist das Projekt aber meinerseits nun wirklich erstmal fertig.

Die korrigierte Datei download.php:

PHP-Quelltext
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
<?php
include 'cfg.php';
if (@isset($_POST["zufall"])) {
$zufall = $_POST["zufall"];
$file = $zufall;
//$filetosave = substr($zufall,strlen($backpath)); // Das war bei Unter-Unter-Verzeichnissen fehlerhaft !
$tmp = $file;
while (strpos($tmp,'/') >0)
{$tmp= substr($tmp,strpos($tmp,'/')+1);};
$backpath = substr($file,0,strlen($file)-strlen($tmp));
$filetosave = $tmp;

clearstatcache();
if ($filetosave == "") {$filetosave = $zufall;};
if (file_exists ($file)) {
$filesize = filesize($file);
header("Content-Type: ".image_type_to_mime_type ( exif_imagetype($file)).")");
header("Content-Disposition: attachment; filename=".$filetosave);
header("Content-Length: "$filesize);
readfile($file);
}
}
else echo 'FEHLER !!!';
?>