Javascript：URLから画像をロードして表示する

私はこれをJavaScriptの非常に新しいものとして覚えています。私はあなたと私の忍耐を感謝します。Javascript：URLから画像をロードして表示する

ユーザーがテキストエリアに名前を入力できるようにするスクリプトを作成しようとしています。送信を押すと、その名前に基づいて画像が表示されます。私はこれを考え出すことに成功し

：

<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>

ほとんど私が必要とするまさにんどちらがどのようなユーザー入力の周りに画像を-loads。しかし、私が望むのは、画像を新しいウィンドウで開くこと、またはコンピュータにダウンロードすることではなく、the example hereのような画像としてクリックするとそのページに表示したいのです。

私はJavascriptの経験がないことが、私がこれを理解できない主な原因だと確信しています。上記のスクリプトは、私が物事をねじ込むことなく得ることができる限りです。どんな助けもありがとうございます。

出典

2013-07-13 user2579872

あなたは無地のJavaScriptのライブラリを使用していますか？ –

window.location.hrefは、新しいウィンドウで開くように指示しています。私はあなたが見た例のようにjQueryを使うことをお勧めします。 – dcodesmith

ボタンがクリックされると、入力の値を取得し、（どこ又は）本体に付加された画像要素を作成するためにそれを使用する：

<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

同じjQueryの中で：

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

出典

2013-07-13 20:43:36 adeneo

これはまさに私が後にしたものです。ありがとうございました。今私はあなたがそれをやった方法を理解しなければなりません。私はあなたが言ったことを理解している、私はちょうどそれが設定する前に、もう少し周りに私の心を包んでいなければならない。 – user2579872

私は、ボタンにIDを与え、onclickハンドラをアタッチし、そのハンドラで、ボタンをクリックすると、テキスト入力の値を取得し、変数に表示されるようにURLを作成してから、 image要素のsrcプロパティをURLに設定し、その画像を本文に追加します。しかし、画像は削除されませんが、それは簡単に把握するか、別の質問をするだけです。あなたは歓迎されています。 – adeneo

あなたはこのようなものの後にある：

<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>

出典

2013-07-13 20:45:20

ID imgDivでのdivを追加して、ご使用のスクリプト私はjQueryを使って、あなたを圧倒していないTPとしてあなたの元に近い滞在してみました

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

と、このような

出典

2013-07-13 20:46:02 mplungjan

あなたは正しい考えを生成する必要がありますURLは入力値に基づいています。唯一の問題は、window.location.hrefを使用していることです。 window.location.hrefを設定すると、現在のウィンドウのURLが変更されます。おそらく、イメージのsrc属性を変更することです。あなただけの「SRC」属性に変更するイメージタグを欠落していた

<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>

出典

2013-07-13 20:46:17

src属性のないイメージは有効なHTMLではありません。 http://w3c.github.io/html/single-page.html#the-img-elementしかし、少なくともFirefoxでは必要に応じて動作します。 –

：

<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>

出典

2013-07-13 20:51:41 Mike

-1

まず、私は強くあなたのJavascriptを行うためにライブラリやフレームワークを使用することをお勧めします。しかし、何か非常にシンプルなもの、または楽しい学習のために、それは大丈夫です。

第2に、onclickに直接バインドすることはお勧めしません。私の最初の提案もそのようになります。

言われたことは必要なのはあなたのページのimgのsrcを変更することです。あなたの画像を表示、あなたがこのようにimgタグを挿入する必要がありたい場所で

：

次に、あなたはsrc属性を更新するためのonclickを変更する必要があります。私は考えることができる最も簡単な方法は、

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

はその後、再び、それはそれを行うための最善の方法ではありません彼のようなものですが、それがスタートです。私はあなたにjQueryを試して、onclickを使って同じwhitoutを実現する方法を見てみましょう（ヒントについてはjqueryのイベントについてのセクションをチェックしてください）

私は、いくつかのGoogleロゴを使って簡単なフィドルを例に挙げました。 ..ボックスに4 o 3を入力すると、異なるサイズの2つの画像が表示されます。（申し訳ありません..私は例として、より良い画像を検索する時間がない）

http://jsfiddle.net/HsnSa/

出典

2013-07-13 21:02:47 Fernando

Javascript：URLから画像をロードして表示する

答えて

関連する問題