web-dev-qa-db-ja.com

JavaScriptで画像を表示する方法は？

JavaScriptを使用して画像を表示しようとしていますが、その方法がわかりません。私は次を持っています

_function image(a,b,c)
{
  this.link=a;
  this.alt=b;
  this.thumb=c;
}

function show_image()
{
  document.write("img src="+this.link+">");
}

image1=new image("img/img1.jpg","dsfdsfdsfds","thumb/img3");
_

hTMLで

_<p><input type="button" value="Vytvor" onclick="show_image()" > </p>
_

image1.show_image();のようなものをどこに置くべきかわかりません。

HTML？またはどこか...

javascripthtmlimageobject
19
ivanz

Javascript DOM API を使用できます。特に、 createElement（） メソッドを見てください。

次のような画像を作成する再利用可能な関数を作成できます...

function show_image(src, width, height, alt) {
    var img = document.createElement("img");
    img.src = src;
    img.width = width;
    img.height = height;
    img.alt = alt;

    // This next line will just add it to the <body> tag
    document.body.appendChild(img);
}

次に、このように使用できます...

<button onclick=
    "show_image('http://google.com/images/logo.gif', 
                 276, 
                 110, 
                 'Google Logo');">Add Google Logo</button>

JsFiddleの実際の例を参照してください： http://jsfiddle.net/Bc6Et/

41
jessegavin