Autor Beitrag
delnu
Ehemaliges Mitglied
Erhaltene Danke: 1



BeitragVerfasst: Mi 22.02.17 01: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
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starofftopic star
Beiträge: 18767
Erhaltene Danke: 1640

W10 x64 (Chrome, IE11)
Delphi 10.2 Ent, Oxygene, C# (VS 2015), JS/HTML, Java (NB), PHP, Lazarus
BeitragVerfasst: Mi 22.02.17 04:36 
Versuche es mal damit. ;-)
ausblenden 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 };
}
delnu
Ehemaliges Mitglied
Erhaltene Danke: 1



BeitragVerfasst: Mi 22.02.17 05: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
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starofftopic star
Beiträge: 18767
Erhaltene Danke: 1640

W10 x64 (Chrome, IE11)
Delphi 10.2 Ent, Oxygene, C# (VS 2015), JS/HTML, Java (NB), PHP, Lazarus
BeitragVerfasst: Mi 22.02.17 05: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.
delnu
Ehemaliges Mitglied
Erhaltene Danke: 1



BeitragVerfasst: Mi 22.02.17 07: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 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
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starofftopic star
Beiträge: 18767
Erhaltene Danke: 1640

W10 x64 (Chrome, IE11)
Delphi 10.2 Ent, Oxygene, C# (VS 2015), JS/HTML, Java (NB), PHP, Lazarus
BeitragVerfasst: Mi 22.02.17 08: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:
learn.jquery.com/abo...ry/how-jquery-works/
hydemarie
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starofftopic star
Beiträge: 428
Erhaltene Danke: 51



BeitragVerfasst: Mi 22.02.17 08:35 
Sich das lästige Verstehen von Grundlagen zu ersparen, indem man einfach Bibliotheken reinklebt, ist eine grauenvolle Idee.
delnu
Ehemaliges Mitglied
Erhaltene Danke: 1



BeitragVerfasst: Mi 22.02.17 09: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
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starofftopic star
Beiträge: 18767
Erhaltene Danke: 1640

W10 x64 (Chrome, IE11)
Delphi 10.2 Ent, Oxygene, C# (VS 2015), JS/HTML, Java (NB), PHP, Lazarus
BeitragVerfasst: Mi 22.02.17 09: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
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starofftopic star
Beiträge: 428
Erhaltene Danke: 51



BeitragVerfasst: Mi 22.02.17 09: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 eine interessante Sache für dich. Kann DOM und AJAX und ist nicht annähernd so groß wie jQuery.
delnu
Ehemaliges Mitglied
Erhaltene Danke: 1



BeitragVerfasst: Mi 22.02.17 09:32 
Danke. Das werde ich mir dann auch mal ansehen. Aber jetzt brauche ich nach der langen Nacht wirklich erstmal Schlaf. :shock:
delnu
Ehemaliges Mitglied
Erhaltene Danke: 1



BeitragVerfasst: Do 23.02.17 03: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
freelinks.usa.cc/random/ eingebunden.
Einloggen, um Attachments anzusehen!
jaenicke
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starofftopic star
Beiträge: 18767
Erhaltene Danke: 1640

W10 x64 (Chrome, IE11)
Delphi 10.2 Ent, Oxygene, C# (VS 2015), JS/HTML, Java (NB), PHP, Lazarus
BeitragVerfasst: Do 23.02.17 06: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:
ausblenden 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:
stackoverflow.com/qu...motely-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.
delnu
Ehemaliges Mitglied
Erhaltene Danke: 1



BeitragVerfasst: Do 23.02.17 08: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.
ausblenden 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:

ausblenden 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

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

benutze ich jetzt

ausblenden 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
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starofftopic star
Beiträge: 18767
Erhaltene Danke: 1640

W10 x64 (Chrome, IE11)
Delphi 10.2 Ent, Oxygene, C# (VS 2015), JS/HTML, Java (NB), PHP, Lazarus
BeitragVerfasst: Do 23.02.17 18:05 
Das title Attribut kannst du natürlich auch per Javascript auslesen.
delnu
Ehemaliges Mitglied
Erhaltene Danke: 1



BeitragVerfasst: Do 23.03.17 22: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
ontopic starontopic starontopic starontopic starontopic starontopic starofftopic starofftopic star
Beiträge: 873
Erhaltene Danke: 148

Win7
VS 2013, VS2015
BeitragVerfasst: Do 23.03.17 22:43 
Wenbn du schon "Box-Modell" in die Runde wirfst: wiki.selfhtml.org/wi...lassisches_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 ...?
delnu
Ehemaliges Mitglied
Erhaltene Danke: 1



BeitragVerfasst: Fr 24.03.17 02: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.
delnu
Ehemaliges Mitglied
Erhaltene Danke: 1



BeitragVerfasst: Di 28.03.17 13: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:
ausblenden 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 !!!';
?>
Einloggen, um Attachments anzusehen!