Profil | Mitglieder | Registrieren | Start | Suche


PHP-Support.de » Programmierung » HTML, JavaScript & CSS » JavaScript Untertitel für Bilder    » Hallo Gast [Login | Registrieren]

Neues Thema | Antworten   

Autor Beitrag
dreide
Mitglied
Anfänger


Dabei seit: 12.04.2016
Herkunft: keine Angabe
Posts: 42
     JavaScript Untertitel für Bilder Zitat | Bearbeiten

Hallo ich bins mal wieder.
Ich habe einen Script gebastelt der mit JavaScript Vorschaubilder erzeugt.
Das ganze sieht so aus:
 PHP 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:

<!DOCTYPE html>
    <div id="div1">
    <input type="file" id="files" name="files[]" multiple />
    <button id="clearOuter">Alles löschen</button>
    <output id="list" style="text-align:center;"></output>
    </div>


<script>
    function dateiauswahl(evt) {
            var dateien = evt.target.files;
            for (var i = 0, f; f = dateien[i]; i++) {
                if (!f.type.match('image.*')) {
                    continue;
                }
                var reader = new FileReader();
                reader.onload = (function (theFile) {
                    return function (e) {
                        var vorschau = document.createElement('img');
                        vorschau.className = 'vorschau';
                        vorschau.src = e.target.result;
                        vorschau.title = theFile.name;
                        vorschau.value = theFile.name;
                        document.getElementById('list')
                            .insertBefore(vorschau, null);
                          //var newDiv = document.createElement("div"); 
  //var newContent = document.createTextNode("Hi there and greetings!"); 
  //newDiv.appendChild(newContent); 

  //var currentDiv = document.getElementById("div1"); 
  //document.body.insertBefore(newDiv, currentDiv);
                    };
                })(f);
                reader.readAsDataURL(f);
            }
        }
    document.getElementById('files')
        .addEventListener('change', dateiauswahl, false);

</script>


Das ganze funktioniert auch wunderbar aber jetzt würde ich nicht nur gerne den Bild Titlel beim drüberfahren anzeigen sondern auch unter dem Bild. Die einzige möglichkeit die ich im Internett gefunden habe war die, die im Script auskommentiert ist. Allerdings funktioniert das ganze nicht. Jetzt meine Frage: Warum funktioniert das ganze so nicht wie funktioniert es oder gibt es noch eine bessere Lösung? Ich bin euch für jede Hilfreiche Antwrt dankbar.


26.06.2016, 17:15 Profil | PM | E-Mail  
Andavos
Administrator
Foren-Gott


Dabei seit: 30.11.2003
Herkunft:
Posts: 6186
      Zitat | Bearbeiten

Ich kann dir stark empfehlen, jQuery zu verwenden. Ohne jQuery fange ich heute nichts in JavaScript mehr an.

Mit jQuery ist da super einfach:
 PHP 
1:
2:

$('id_deines_div_containers').text('Der Text, der im div erscheinen soll');



www.php-einfach.de, PHP lernen leicht gemacht
www.webhosterwissen.de, Webhosting-Vergleich



27.06.2016, 09:34 Profil | PM | E-Mail  
Seiten (1):  1 
PHP-Support.de » Programmierung » HTML, JavaScript & CSS » JavaScript Untertitel für Bilder   

Neues Thema | Antworten   


Powered by Command Board 1.0 - Beta 2.0 © 2004-08 PHP-Einfach | Impressum | Datenschutz