Javascript: Laden Sie ein Bild von URL und Anzeige

Ich möchte mit der Tatsache vor, dass ich sehr sehr neu zu JavaScript bin. Ich schätze deine Geduld mit mir.Javascript: Laden Sie ein Bild von URL und Anzeige

Ich versuche ein Skript zu erstellen, das es einem Benutzer ermöglicht, einen Namen in einen Textbereich einzugeben, auf Senden zu drücken, und auf diesem Namen wird ein Bild angezeigt.

gelang es mir mit diesem zu kommen:

<html> 
<body> 
<form> 
<input type="text" value="" id="imagename"> 
<input type="button" onclick="window.location.href='http://webpage.com/images/'+document.getElementById('imagename').value +'.png'" value="GO"> 
</form> 
</body> 
</html>

Was genau fast nicht, was ich brauche ein Bild um, was ein Benutzer Eingaben -loads. Aber ich möchte nicht, dass das Bild in einem neuen Fenster geöffnet oder auf meinen Computer heruntergeladen wird - ich möchte, dass es auf der Seite angezeigt wird, wenn es als Bild wie the example here angeklickt wird.

Ich bin sicher, dass meine Unerfahrenheit mit Javascript die Hauptursache dafür ist, dass ich das nicht herausfinden kann. Das obige Skript ist so weit wie möglich, ohne etwas zu vermasseln. Jede Hilfe wird geschätzt.

Quelle

2013-07-13 user2579872

Sind Sie eine Bibliothek von einfachen Javascript verwenden? –

window.location.href sagt es in einem neuen Fenster zu öffnen. Ich schlage vor, Sie verwenden jQuery genau wie das Beispiel, das Sie gesehen haben. – dcodesmith

Wenn die Schaltfläche geklickt wird, erhalten den Wert des Eingangs und es verwenden, um ein Bild Element zu schaffen, die an den Körper angehängt wird (oder anderswo):

<html> 
<body> 
<form> 
    <input type="text" id="imagename" value="" /> 
    <input type="button" id="btn" value="GO" /> 
</form> 
    <script type="text/javascript"> 
     document.getElementById('btn').onclick = function() { 
      var val = document.getElementById('imagename').value, 
       src = 'http://webpage.com/images/' + val +'.png', 
       img = document.createElement('img'); 

      img.src = src; 
      document.body.appendChild(img); 
     } 
    </script> 
</body> 
</html>

FIDDLE

die gleiche in jQuery:

$('#btn').on('click', function() { 
    var img = $('<img />', {src : 'http://webpage.com/images/' + $('#imagename').val() +'.png'}); 
    img.appendTo('body'); 
});

Quelle

2013-07-13 20:43:36 adeneo

Das ist genau das, was ich suchte. Vielen Dank. Jetzt muss ich nur herausfinden, wie du es gemacht hast. Ich verstehe, was du gesagt hast, ich muss mich nur noch ein paar Mal darum kümmern, bevor es untergeht. – user2579872

Ich gab dem Button einfach eine ID und fügte einen onclick-Handler hinzu, und in diesem Handler, wenn der Button geklickt wird, erhält er den Wert der Texteingabe, erstellt die URL, wie Sie in den Variablen sehen können, und erstellt dann Ein Bildelement, legt die src-Eigenschaft des Bildes auf die URL fest und hängt dieses Bild an den Text an. Es entfernt jedoch die Bilder nicht, aber das sollte leicht herauszufinden sein, oder einfach eine andere Frage stellen. Gern geschehen, BTW. – adeneo

Sind Sie nach etwas wie folgt aus:

<html> 
<head> 
    <title>Z Test</title> 
</head> 
<body> 

<div id="img_home"></div> 

<button onclick="addimage()" type="button">Add an image</button> 

<script> 
function addimage() { 
    var img = new Image(); 
    img.src = "https://www.google.com/images/srpr/logo4w.png" 
    img_home.appendChild(img); 
} 
</script> 
</body>

Quelle

2013-07-13 20:45:20

einen div mit der ID imgDiv hinzufügen und machen Sie Ihren Skript

document.getElementById('imgDiv').innerHTML='<img src=\'http://webpage.com/images/'+document.getElementById('imagename').value +'.png\'>'

ich so nah an Ihrem ursprünglichen als tp nicht überwältigen Sie mit jQuery und so

Quelle

2013-07-13 20:46:02 mplungjan

Sie müssen richtige Idee Erzeugung zu bleiben versucht, die URL basierend auf dem Eingabewert. Das einzige Problem ist, dass Sie window.location.href verwenden. Die Einstellung window.location.href ändert die URL des aktuellen Fensters. Wahrscheinlich möchten Sie das src-Attribut eines Bildes ändern.

<html> 
<body> 
<form> 
    <input type="text" value="" id="imagename"> 
    <input type="button" onclick="var image = document.getElementById('the-image'); image.src='http://webpage.com/images/'+document.getElementById('imagename').value +'.png'" value="GO"> 
</form> 
<img id="the-image"> 
</body> 
</html>

Quelle

2013-07-13 20:46:17

Ein Bild ohne src-Attribut ist kein gültiges HTML. http://w3c.github.io/html/single-page.html#the-img-element Allerdings funktioniert es zumindest in Firefox wie gewünscht. –

Sie waren nur ein Image-Tag fehlt das „src“ -Attribut von ändern:

<html> 
<body> 
<form> 
<input type="text" value="" id="imagename"> 
<input type="button" onclick="document.getElementById('img1').src =   'http://webpage.com/images/' + document.getElementById('imagename').value +'.png'"  value="GO"> 
<br/> 
<img id="img1" src="defaultimage.png" /> 
</form> 
</body> 
</html>

Quelle

2013-07-13 20:51:41 Mike

-1

Zunächst empfehle ich eine Bibliothek oder Framework verwenden, um Ihre Javascript zu tun. Aber nur für etwas sehr sehr einfaches oder für den Spaß zu lernen, ist es in Ordnung. (Sie können jquery, Unterstrich, knockoutjs, eckig verwenden)

Zweitens ist es nicht ratsam, direkt an Onclick binden, mein erster Vorschlag geht auch so.

Das wurde gesagt Was Sie brauchen, ist die Src eines img auf Ihrer Seite zu ändern.

An dem Ort, wo Sie Ihr Bild angezeigt werden soll, sollten Sie ein img-Tag wie folgt einzufügen:

Als nächstes müssen Sie die Onclick ändern Sie das Attribut src zu aktualisieren.Der einfachste Weg, ich denken kann, ist wie sein

onclick=""document.getElementById('image-placeholder').src = 'http://webpage.com/images/' + document.getElementById('imagename').value + '.png"

Dann wieder, es ist nicht der beste Weg, es zu tun, aber es ist ein Anfang. Ich empfehle Ihnen, jQuery zu versuchen und zu sehen, wie Sie das gleiche ohne onclick erreichen können (Tipp ... überprüfen Sie den Abschnitt über jquery über Ereignisse)

Ich habe eine einfache Geige als ein Beispiel für Ihre Poble mit einigen Google-Logos. .. Typ 4 oder 3 in der Box und Sie werden zwei Bilder von unterschiedlicher Größe. (Sorry .. Ich habe keine Zeit für bessere Bilder als Beispiel suchen)

http://jsfiddle.net/HsnSa/

Quelle

2013-07-13 21:02:47 Fernando

Javascript: Laden Sie ein Bild von URL und Anzeige

Antwort

Verwandte Themen