How to do the "Paste And Show" function

Question

Dont know what to call it, but if you have seen on Facebook, when you insert http://www2.scandvision.se/oresund10/images/body-background-1.jpg, it scales the picture down and show it besides the link, how to do something like that.

To be detailed how to make a box you insert something and then after 1-2 seconds it shows the picture/in scaled form, with the link you pasted besides?

How can you do this?

Answer 1

1. Submit the URL to a server-side script (e.g., PHP or ASP)
2. Use the image processing library in that language to scale the image down to the size you want
3. Return a URL (on your site) where that resized picture can be downloaded
4. Use that returned URL in JavaScript to generate an <img /> tag.

Answer 2

It's basically loading the image into a img tag everytime the text is changed

html:

<input id="txt1" type="text">
<img id="img1" width="50" height="50">

onload/domready script:

​document.getElementById("txt1")​.onchange = function(){
    document.getElementById("img1").src = this.value;
};