ivanz ivanz - 3 months ago 18
HTML Question

How to display image with javascript?

I am trying to display image, through javascript, but i can't figure out how to do that. I have following

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");


in html

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


I can't figure out where should i put something like
image1.show_image();


Should it be in constructor, or html? or somewhere else...
thanks

Answer

You could make use of the Javascript DOM API. In particular, look at the createElement() method.

You could create a re-usable function that will create an image like so...

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);
}

Then you could use it like this...

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

See a working example on jsFiddle: http://jsfiddle.net/Bc6Et/